WordPress4.3から、管理画面上でファビコン(サイトアイコン)が簡単に設定できるようになりました。
画像を用意して設定するだけではありますが、ファビコンを設定する手順について解説したいと思います。
WordPress4.3でファビコンを設定する方法
WordPress4.3でファビコンを設定する方法は、以下の通りです。
1. WordPress管理画面より[外観] – [カスタマイズ]にアクセスします。
2. [サイト基本情報]を選択します。
3. 「サイトアイコン」の[ファイルを選択]をクリックします。
4. ファビコンとして設定したい画像をアップロードします。画像のサイズは512*512px以上が推奨されています。
5. 右側のプレビューを確認しながら、画像の切り抜き範囲を設定します。
6. [切り抜かない]もしくは[画像切り抜き]をクリックします。
これでファビコンの設定は完了です。サイトアイコンの部分には、設定した画像が表示されるようになります。
サイトアイコンを設定することで、以下のようなコードが</head>直前に出力されます。
<link rel="icon" href="http://hogehoge.com/wp-content/uploads/2015/08/cropped-logo-32x32.png" sizes="32x32" /> <link rel="icon" href="http://hogehoge.com/wp-content/uploads/2015/08/cropped-logo-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="http://hogehoge.com/wp-content/uploads/2015/08/cropped-logo-180x180.png"> <meta name="msapplication-TileImage" content="http://hogehoge.com/wp-content/uploads/2015/08/cropped-logo-270x270.png">
上記のように、サイズ違いやiOSのホーム画面用のアップルタッチアイコンなども自動生成してくれます。
なお、管理画面でも読み込まれるので、全ページでブラウザのタブにファビコンが表示されるようになります。
あとがき
今まではテーマ側が対応していなければ、自分でテーマを編集して設定する必要がありました。それがどのテーマでも管理画面から設定できるようになったのはありがたいですね。