favicon（ファビコン）のサイズと設置方法を解説

2021年7月現在でのfaviconのサイズと設置について解説します。

favicon（ファビコン）のサイズは何種類もありますが、下記の4つがあれば十分だと思います。

・16px × 16px：各ブラウザのタブ
・32px × 32px：各ブラウザのタブ（Retinaディスプレイ）
・180px × 180px：iPhone用
・192px × 192px：Android用

「16px」と「32px」の2つはマルチアイコンにします。
マルチアイコンとは、一つの「icoファイル」に複数のサイズがまとめられたもので、自動的に適切な画素数で表示される仕組みです。
「32px」は、iMacのRetinaディスプレイでも綺麗に見える用のサイズです。

画像の制作は、画像編集ソフトを使って作ると良いかと思います。
今回は、下記のような画像を作りました。
各ブラウザ用のファビコンは、サイズが小さいので文字などが潰れないように、シンプルな画像を作りました。
ファイル名は「各ブラウザ用」は「favicon16.png（16px）」と「favicon32.png（32px）」（仮）で、「iPhone用」は「apple-touch-icon.png」で、「Android用」は「android-chrome-192x192.png」で保存しましょう。
各ブラウザ用については、この後説明します。

各ブラウザ用のfavicon作成は、下記のサイトで簡単に作成・変換できます。

https://ao-system.net/favicon/

先ほどの「16px」と「32px」サイズのファイルを選択して「favicon.ico作成」ボタンを押します。
2つのサイズを選択する事で、自動的にマルチアイコンになります。

これで、iPhone用、Android用、各ブラウザ用の3つのファイルが出来ました。

最後にファイルをサーバーにアップし、HTMLのmetaタグ付近に下記のコードを記載してfaviconを設置します。
画像のパスは任意で変更してください。

ブラウザで確認してみましょう。
キャッシュをクリアして更新してみると確実です。

ちなみに、faviconファイルをルートディレクトリ（indexファイルと同じ場所）にアップすれば、HTMLに設置の記述が無くてもブラウザ側が認識してくれます。
そのため、サイト内の全ページに設置の記述をしなくてもファビコンの表示が可能です。

サイトをWordPressで制作している場合は、管理画面から簡単に設置が可能です。

「外観 ⇒ カスタマイズ ⇒ サイト基本情報 ⇒ サイトアイコン」の順に選択していき、ファビコンファイルをアップロードします。
ファイル形式は「PNG」で問題ありません。サイズは案内にある通り「512px×512px」で作成しておきましょう。

サイト制作において意外と忘れがちなファビコンですが、すぐにサイトを認識してもらえますので、作っておくと良いかと思います。