先日、このブログのテンプレートを賢威7に変えてみました。
賢威ってデフォルトでファビコンが設定されています。今は自作のファビコンに変更していますが、変更前は下記のようなファビコンが表示されていました。
(デザインは賢威のテンプレートのタイプによって異なります。)
デザイン自体はとても良いのですが、賢威の頭文字を取ったデザインのようなので、自分のブログとの関連は薄いです。
ということで、自分でファビコンを自作してみました。
先の画像のサイズは、幅192px・高さ192pxの正方形です。
このサイズを覚えておいて、手元の画像編集ソフトで何個か作ってみました。
1個目
リニューアル前のブログのロゴを枠に合わせて配置。
2個目
1個目のファビコンを表示させたときに小さくてよく分からなかったので、このような形に。
3個目
2個目も文字が小さくて分かりにくいので、文字を大きく。。。
で、このファビコンの表示を実際に見るとこんな感じ。
素人デザインだから見た目が微妙なのは仕方ないとして、文字でファビコンを構成すると表示が小さいから何が何だか分からないですね。
4個目
いろいろ開き直って作った4個目がこれ。
ブラウザのファビコン表示がこれ。
なんか素人臭さが薄まったような気がした(自社調べ)ので、これを採用。
賢威7のファビコンの変更について
favicon.icoの作成
画像自体は手元の画像編集ソフトで用意します。画像を用意したら下記のサイトにアップロードするとすぐにダウンロードできます。
Favicon Generator | Icons for the Web
ブラウザにFavicon Generatorを表示させたら、黄色の四角の中に作成した画像をドラッグして下さい。
ドラッグ後、ZIPファイルのダウンロードが始まります。ダウンロードファイルの保存ができたら解凍して下さい。
解凍によって展開されたファイルの中にfavicon.icoがありますので、それをFTPソフトを使ってアップロードします。
アップロード先は、サーバー側のWordPressのディレクトリ内にあるテーマフォルダの直下です。
FTPソフトでサーバーに設置したWordPressのディレクトリを開いたら下記のように移動するとアップロード先が分かるかと思います。
wp-content
└ themes
└ keni70_wp_standard_green_201611071619
(※一番下層の賢威7のテーマが格納されているディレクトリ名はサンプルです)
favicon.icoのアップロードが完了したら、自分のサイトをブラウザで表示してファビコンが変わっているか確認してみて下さい。
変更されない場合は、ブラウザのキャッシュを削除した上で表示を確認すると良いでしょう。