Simplicityにファビコンを設定する方法

スポンサーリンク

Faviconって大事

Faviconはサイトの看板みたいなもんだから、やっぱりしっかりと設定しておきたい。今日時点で必要なfaviconのリスト(realfavicongenerator.netより)

  1. favicon.ico: IE用
  2. favicon-16×16.png: タブ表示用
  3. favicon-32×32.png: Mac版Safari用
  4. favicon-96×96.png: Google TV用
  5. favicon-160×160.png: Opera 12 までのスピード・ダイアル用
  6. favicon-196×196.png: Android版Chrome用
  7. mstile-70×70.png: Windows 8 用
  8. mstile-144×144.png
  9. mstile-150×150.png
  10. mstile-310×310.png
  11. mstile-310×150.png
  12. apple-touch-icon-57×57.png: iOS用
  13. apple-touch-icon-60×60.png
  14. apple-touch-icon-72×72.png
  15. apple-touch-icon-76×76.png
  16. apple-touch-icon-114×114.png
  17. apple-touch-icon-120×120.png
  18. apple-touch-icon-144×144.png
  19. apple-touch-icon-152×152.png
  20. apple-touch-icon.png
  21. apple-touch-icon-precomposed.png

多い、多すぎる。いつの間にこんなに・・・。

でも、realfavicongenerator.netで縦260x横260以上の大きさの画像ファイルを用意すれば、一気に上の21ファイルを作ってくれます。便利!

おまけに、以下のようなHTMLコードまで作ってくれます。至れり尽くせり。

Simplicityでの設定

WordPress管理画面の「外観→カスタマイズ」の「その他の設定」項目にある「テーマ側でファビコンを設定」「テーマ側でアップルタッチアイコンを設定」のチェックを外して、「外観→テーマ編集」で、header.phpの</head>の直前に以下のコードを挿入。

最後に、直下に作成された画像ファイルをまとめてアップロード。

これで、ばっちり対策できました。