賢威7のファビコンを自分で作成したファビコンに変えてみた

先日、このブログのテンプレートを賢威7に変えてみました。

賢威ってデフォルトでファビコンが設定されています。今は自作のファビコンに変更していますが、変更前は下記のようなファビコンが表示されていました。

apple-touch-icon
(デザインは賢威のテンプレートのタイプによって異なります。)

デザイン自体はとても良いのですが、賢威の頭文字を取ったデザインのようなので、自分のブログとの関連は薄いです。

ということで、自分でファビコンを自作してみました。

先の画像のサイズは、幅192px・高さ192pxの正方形です。

このサイズを覚えておいて、手元の画像編集ソフトで何個か作ってみました。

1個目

logo-161110-fw

リニューアル前のブログのロゴを枠に合わせて配置。

 

2個目

logo-161110-2-fw

1個目のファビコンを表示させたときに小さくてよく分からなかったので、このような形に。

 

3個目

logo-161110-3-fw

2個目も文字が小さくて分かりにくいので、文字を大きく。。。

で、このファビコンの表示を実際に見るとこんな感じ。
m630favicon-sample

素人デザインだから見た目が微妙なのは仕方ないとして、文字でファビコンを構成すると表示が小さいから何が何だか分からないですね。

 

4個目

いろいろ開き直って作った4個目がこれ。
logo-161110-4-fw

ブラウザのファビコン表示がこれ。
m630favicon-sample2

なんか素人臭さが薄まったような気がした(自社調べ)ので、これを採用。

 

賢威7のファビコンの変更について

favicon.icoの作成

画像自体は手元の画像編集ソフトで用意します。画像を用意したら下記のサイトにアップロードするとすぐにダウンロードできます。

Favicon Generator | Icons for the Webfaviconmaker

ブラウザにFavicon Generatorを表示させたら、黄色の四角の中に作成した画像をドラッグして下さい。

ドラッグ後、ZIPファイルのダウンロードが始まります。ダウンロードファイルの保存ができたら解凍して下さい。

解凍によって展開されたファイルの中にfavicon.icoがありますので、それをFTPソフトを使ってアップロードします。

アップロード先は、サーバー側のWordPressのディレクトリ内にあるテーマフォルダの直下です。

FTPソフトでサーバーに設置したWordPressのディレクトリを開いたら下記のように移動するとアップロード先が分かるかと思います。

wp-content
 └ themes
   └ keni70_wp_standard_green_201611071619
(※一番下層の賢威7のテーマが格納されているディレクトリ名はサンプルです)

favicon.icoのアップロードが完了したら、自分のサイトをブラウザで表示してファビコンが変わっているか確認してみて下さい。

変更されない場合は、ブラウザのキャッシュを削除した上で表示を確認すると良いでしょう。