こんにちは、ヨシハルです。
WordPressでファビコンの設定が知りたい。
上記のお悩みを解決していきます。
WordPress バージョン4.3以降でファビコン（サイトアイコン）が簡単に設定できるようになりましたので、ご紹介します。
ファビコンって何？
ファビコンとはブラウザのタブやお気に入りに登録した際に表示されるアイコンになります。
ファビコンを設定するとあなたのサイトをすぐに認識できますし、検索結果の画面にも表示されますので、ブランドイメージを印象づけることができます。
スマホでもホーム画面に登録した際のアイコンに使われますので、必ず設定するようにしましょう。
WordPressにファビコンを設定する方法
画像を用意する
ファビコン画像はサイトのイメージに合った画像を用意しましょう。
画像の仕様はpng形式で、サイズは512×512ピクセルが推奨となります。
ファビコンを設定する
それではWordPressにファビコンを設定していきましょう。
WordPressの管理画面から「外観」>「カスタマイズ」をクリックします。
左側のメニューから「サイト基本情報」をクリックします。
「サイトアイコンを選択」をクリックします。
画像をアップロードして画像を選び「選択」をクリックします。すでにアップロードしている場合はメディアライブラリから選択してください。
プレビューでファビコンが確認できますので、問題なければ「公開」をクリックします。
以上でファビコンの設定は完了です。
ブラウザのタブやブックマークなどでファビコンが正常に表示されているか確認してみましょう。
出力されるソース
サイトのソースを確認すると以下のように<head>内にタグが入力されてます。
<link rel="icon" href="サイトURL.../favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="サイトURL.../favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="サイトURL.../favicon-180x180.png" />
<meta name="msapplication-TileImage" content="サイトURL.../favicon-270x270.png" />1・2行目はサイズ違いのファビコンになります。
ユーザー環境に合わせてどちらかが使用されます。
3行目はスマホでホーム画面に追加する際に使用されます。
4行目はWindowsのピン留めに使用されます。
まとめ
今回はWordPress標準機能でのファビコン設定をご紹介しました。
1つの画像を設定するだけど、複数のサイズやスマホのホーム画面など対応してくれるので助かりますね。
