タロログを読んでくださっている皆さま、お気づきになっているでしょうか？
実は、タブに表示されているアイコンがタロログのロゴになっているのです。ちょっとしたことではありますが、ブログのオリジナリティがグッと上がることでしょう。
※パソコンで表示した場合
※スマートフォンで表示した場合
このようなサイト独自のアイコンのことを、「ファビコン（Favicon）」と言います。「favorite icon（お気に入りアイコン）」の略です。
ウェブブラウザーのブックマークに登録したときも、このファビコンが表示されることがありユーザーの目に留まりやすくなるとも言われています。真偽のほどはわからないので（おそらく効果は薄いと思います）もしアクセスアップをさせたいという方は、まずSEOなどの他の施策を試してみましょう。
※SEOについてはこちら
つまり、ほとんどは自己満足の作業なのですが、せっかくブログをやっているのですから気分を上げてモチベーションを保つためにも試してみてはどうでしょうか？訪問してくれるユーザーも、サイトをより好きになってくれるかもしれませんよ。
ワードプレスの4.3以降であれば、カスタマイズ機能で簡単に変更できるのでそれ以前のバージョンをお使いの方はこの機会にバージョンアップしてください。
今回は、このファビコンの設定方法を解説します。
ファビコン用の画像の準備
ファビコン用の画像は、512ピクセル×512ピクセル以上推奨となっています。画像は必ず正方形で準備する点には注意してください。
今回用意した画像は、こちらの144ピクセル×144ピクセルのアイコンです。
ファイル形式はPNG形式で保存しておきましょう。また、透過処理を施しておくと見栄えが良くなります。
ファビコンの設定
ワードプレスの管理画面左メニューから「外観」→「カスタマイズ」、もしくはログインした状態でアドミンバーから「カスタマイズ」をクリックしてカスタマイズ画面を開いてください。
「サイト基本情報」→「サイトアイコン」→「画像を選択」をクリックすると、画像の選択画面が表示されるのでアイコンにしたい画像を選択して「選択」をクリックします。
一旦プレビューが確認できるので、実際の表示を確認しましょう。イメージと違う場合は、画像切り抜きで調整したり、画像の準備段階からやり直してください。
右下の「画像切り抜き」「切り抜かない」のどちらかをクリックして、ファビコンの設定は完了です。最後にカスタマイズ画面で「保存して公開」をクリックしてください。
実際に表示させたのが次の画面です。
※グーグルクロームでの表示
また、スマートフォンのホーム画面にショートカットを作成した場合もファビコンの表示が適用されます。
※iPhoneでの表示
※Android端末での表示
まとめ
以前のワードプレス でファビコンを表示させようとするには、phpファイルのhead部分を編集したり専用のプラグインを導入したりする必要がありました。この方法は初心者には難易度が高いだけでなく、うまく表示ができなかったりとハードルの高いものでした。
しかしワードプレスがバージョン4.3にアップデートしてからは、こんなにも簡単にファビコンの表示ができます。
ぜひ今すぐやってみてください。
