ファビコン（favicon）とは「Favorite icon」の略で、WEBサイト（ブログも含む）のシンボルマークです。ブラウザのタブやブックマークに独自のファビコンを表示させてアクセスアップにつなげましょう。
タブやURLに表示される画像で、ブックマークした時にも表示されます。「はてなブックマーク」などWEBブックマークでも表示されます。
オリジナルの画像に変更すると、他のサイトと差別化できていいですね。
注意事項
ソースで変更する場合、失敗するとサイトが表示されなくなる可能性があります。
失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。
▼バックアップに必要なファイル
- header.php
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 4.5.1-ja
- STINGER 5、AFFINGER
- Google Chrom
ファビコン用アイコンの準備
正方形の画像を用意します。
拡張子は、「.jpg」「.gif」「.png」のいずれでもかまいません。※後で変更します。
透過画像でも表示することができます。
サイズは、マルチアイコンにしたい場合、16px・32px・48pxの３種類が必要です。
ブラウザの表示は16pxですが、ディスクトップは32px、エクスプローラは48pxと表示サイズがことなります。
どの環境で見ても綺麗に表示させるためにはマルチアイコンにするべきですが、大きい画像でもブラウザの表示で大きくなることはないことから、わたしは32pxか48pxの１つだけを設定しています。
小さい画像で作成すると作りにくいので、大きめのサイズで作成して後からサイズ調整すると楽です。
サイズ調整できたら、拡張子を「.ico」に変更してください。
ソースで変更する場合のファイル名は何でも良いのですが、所定の場所にアップロードして変更する場合のファイル名は「logo.ico」にしておきます。
マルチアイコンを簡単に作れるサイトもありますので、画像を作るのが難しいと感じる方は利用するといいでしょう。
▼半透過マルチアイコンfavicon.icoを作ろう!
http://ao-system.net/alphaicon/
ファビコンのオリジナル変更方法
ファビコンをオリジナルに変更する方法は、ソースを変更する方法と画像を所定のホルダーにアップロードする方法があります。
- ソースを変更する方法
- 画像を所定のフォルダーにアップロードする方法
本来は、画像を所定のフォルダーにアップロードする方法が正解だと思いますが、ブラウザのキャッシュを削除しなければ表示されないので「変更されない！」と思った人が、ソースを変更する方法をし始めたのでは？と思われます。
ソース変更の方が簡単と思われる人もいれば、ソースを変にいじると怖いと思われる人もいます。
どちらの方法でも表示されますので、お好きな変更方法で変更してください。
ソースを変更してオリジナルファビコンにする方法
作業前に、必ず「header.php」のバックアップを取っておいてください。※他に変更していない場合は、AFFINGERのダウンロードファイルがあれば問題ありません。
ファビコン画像をメディアから新規追加（アップロード）しておきます。
アップロードしたファビコン画像を［編集］で開いて、ファイルのURLをコピーします。
［外観］→［テーマの編集］と進み［ヘッダー（header.php）］を開きます。
この「<link rel="shortcut icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.ico" >」がファビコンを呼び出す記述です。
「<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.ico」を選択して、先ほどコピーしたファビコン画像のURLを貼り付けます。
※「"」から「"」の間の部分です。「"」を消してしまわないように注意してください。
ブラウザでサイトを再読み込みさせ、ファビコンが変更していれば完了です。
画像を所定のフォルダーにアップロードして変更。
先に説明した「ヘッダー（header.php）」の「<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.ico」のソースは、あなたがアップロードしたテーマフォルダー内の「images」フォルダー内の「logo.ico」という画像を呼び出すように記述されています。
つまり「wp-content/themes/Affinger_20150629/images/」内に画像をアップロードすればいいわけです。
※AFFINGERのバージョンナンバーは、あなたインストールしたバージョンによってことなります。
FTPソフトで、「images」フォルダーに画像をアップロードしてください。
※アップロードする画像のネームは、必ず「logo.ico」としてください。
画像をアップロードしたら、ブラウザのキャッシュを消去してから再読み込みしてください。
※ファビコンはブラウザでキャッシュされているので、キャッシュを消去しなければ反映されません。
また、すでにブックマークしている場合もファビコンは自動更新されません。
ブックマークのファビコンを変更するには、再度ブックマークしなおす必要があります。
▼Chromのキャッシュ削除方法
https://support.google.com/chrome/answer/95647?vid=1-635777083680052064-166556383
これからインストールを考えている場合は、先にimagesフォルダーにファビコンを入れておくとキャッシュの消去作業がなくて便利ですね。