たまに自サイトをスマホで見ていて不思議に思ったことがあります。
favicon（ブラウザ上のアイコン）が表示されない。。。

ちなみに、favicon とはブラウザ左上に表示されるホームページのアイコンを指します。
↓ 当ブログだと下記画像を使用しています。

普段作業している PC だと問題なく表示されていたので気づくのが遅れました。
（たぶん、デザイナーさんは当たり前に知っていること）。
調べてみると、デバイスによって favicon のサイズを用意しないといけない模様。

主な favicon の対応サイズ

主な対応環境	サイズ
Chrome, Firefox, Safariなどのタブ	32px 四方
Windows のサイトアイコン （デスクトップ等に設置するショートカット等）	48px 四方
高解像度の Windows サイトアイコン （デスクトップ等に設置するショートカット等）	64px 四方
iOS, Androidのホーム画面	192px 四方

ちなみに、私が用意していたのは 32px 四方のアイコン。
PC ブラウザ対応です。気づきませんでした。。。

favicon の作成

多くの環境に対応した favicon を作るとなると、全部手作業で作るのは面倒です。
そうはいっても、WordPress のプラグインを使うほどではないとも思っています。

プランを変更して独自ドメインへ移行したのを機に、無料の外部サービスを使ってマルチサイズの（多くの環境に対応した）favicon を作ることにしました。

元画像の作成

フリー素材で favicon を作成できる下記サイトを使いました。

FREE Icon Maker - generate stylish flat icons in just a few minutes. SVG, PNG, ICO export

英語ですが、favicon（アイコン）を作ってエクスポートするだけなら何とかできる感じです。
このサイトで元画像を作成しました。

マルチサイズの作成

上記サイトで作成した画像を元にマルチサイズの（複数デバイスで表示可能な）favicon を一括生成します。

様々なファビコンを一括生成。favicon generator

使い方は簡単で、"画像ファイルを選択" をクリックして画像ファイルを選択した後、"アイコン作成" を押下します。
その後、ダウンロードボタンを押して取得した Zip ファイル内にサイズ毎の画像ファイルが収められています。

favicon の設置

元画像（favicon.ico）は残して2ファイルをアップロードしました。

• apple-touch-icon-180x180.png
• icon-192x192.png

html 記述

設置した favicon ファイルをブラウザに認識させるために link タグを記述します。

<!-- favicon.ico は PC 向け -->
<!-- 主に iOS 向け -->
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon-180x180.png">
<!-- 主に Android 向け -->
<link rel="icon" type="image/png" href="/icon-192x192.png">

私は普段使っているプラグイン "Insert Headers and Footers" に追加記述して設定しました。
これで、ユーザがページを開いた際に自動で読み込まれます。