開発

WordPressでFaviconを設定するのに必要な画像は512×512の1枚だけだった。ヘッダーもプラグインもいじる必要なし

投稿日:

Faviconとはブラウザのタブやブックマークに表示される小さなアイコン。ブログに設定しようと思いつつ、ついつい後回しになっていました。

最近ではFaviconの有無は検索結果の順位に影響を与えるとも言われています。

そこで設定しておこうと調べてみると、いろいろなサイズがあって古いIEなども含めて全部網羅するのは結構大変そう。ここにあまり労力を割きたくないのでできれば必要最小限で済ませたい。

どうやら最低でも4種類2ファイル、もうちょっとちゃんとするには7種類5ファイルくらい必要になることが判明しました。

■最小限
ブラウザ用(favicon.ico):16×16、32×32、48×48の3サイズのアイコンが含まれた拡張子にicoが付くファイル。
iOS Safari用(apple-touch-icon):iPhoneでホーム画面にショートカット作った時に表示されるアイコン。120×120、152×152、180×180などのサイズがあるが、縮小表示されるので1番大きい180×180のみ用意しておけば何とかなる。

■比較的ちゃんと用意する
Android Chrome用:AndroidのChromeで「ホーム画面に追加」すると使用されるアイコン。36×36~512×512までさまざまなサイズがあるが、無難なのは192×192あたりか。無ければapple-touch-iconを読み込んでくれるので無理に用意しなくてもいいらしい。
Windows8、10:IEやEdgeのメニューから「このページをスタートにピン留めする」を選ぶとスタートメニューの中にタイルのように表示される。その時に使うアイコン。こちらも複数サイズあるが、基本は144×144の画像だけでOK。見たところPCのChromeにはこの機能はないので果たしてどのくらいの人が使っているのか疑問。
Mac OS X El Capitan Safari:よく使うタブを固定する「ページピン」機能で使用されるアイコン。こちらはSVG形式の画像で黒のみとなっています。自分のブログがMacのSafariにページピンで固定される可能性は限りなく低いように思える。

これらの画像を用意し、WordPressに設定するには画像をメディア→ライブラリからアップロードし、テーマヘッダー(header.php)にlinkタグを記入するか、プラグインを使う方法が一般的なようです。

ところが、よくよく見てみるとWordPressにデフォルトでFaviconを設定する項目がありました。この方法で用意するのは512×512以上の画像は1点のみとなっているため、手間をかけずに済みそうです。

WordPressで「サイトアイコン」を設定する

外観→カスタマイズ

WordPressのメニューから外観→カスタマイズを選択します。

外観→カスタマイズ

サイトの基本情報

次に「サイトの基本情報」を選びます。

サイトの基本情報

画像を選択

するとアイコンを設定する画面が開くので「画像を選択」から512×512以上の画像を選びましょう。あまり大きいアイコンを表示する機会は少ないと思うので最低限のサイズで充分です。

画像を選択

公開

プレビューが表示されるので問題が無かったら上部の「公開」を押すと反映されます。画像を変えたい場合は「画像の変更」から画像を選びなおすか、新しい画像をアップロードしてください。

公開

これであれだけ面倒そうに思えたFaviconの設定があっさり完了します。試しにブログを確認するとアイコンが表示されているはず。Faviconはなかなか反映されないことがあるのでChromeの場合はF12でデベロッパーツールを開き、リロードボタンの上で右クリックし、「キャッシュの消去とハード再読み込み」を実行してみてください。

Favicon checker

試しにFaviconチェックしてくれるサイトFavicon checkerでブログを見てみると、「iOS Safari」と「Classic, desktop browsers」の一部が緑色になっています。

Favicon checker

このままではよく分からないので日本語に翻訳すると意味が分かりやすいです。

よく見ると「Android Chrome」のところにもプレビューが出ているので試しに実機で「ホーム画面に追加」をやってみるときちんとアイコンが表示されました。

ソースを見てみると32×32、192×192、180×180、270×270のサイズのアイコンが設定されていて、あのWindows8と10用のタイルアイコンも設定されています。Favicon checker上では「Windows用のタイルアイコンはありません」になっていますが、Windows10のEdgeで実際に試してみたところ、スタート画面に無事アイコンが表示されました。

まとめ

favicon.icoが存在しないのはちょっと気になるところですが、きっとWordPressの開発スタッフが現代に必要なものだけを入れるようにしてくれた結果でしょう。

なんと言ってもいたずらにテーマヘッダー(header.php)をいじったり、余計なプラグインを入れる必要がないのが大きなメリットとなります。

512×512の画像のみで設定できるのでよほど完璧にFaviconを表示できるようにしたい人以外はこれで充分だと思います。

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.