More than 3 years have passed since last update.

Faviconについて

Last updated at 2021-07-13Posted at 2021-07-13

はじめに

インターン先でFaviconの差し替えをしたら、思った以上にFaviconの知識がなかった。
タスクを進める中で調べた内容をまとめる。

ブラウザで複数のページを開いたとき、タブに表示されるアイコンのこと。
Faviconという名前の由来が Favorite Icon だったことも初耳。

以下の二つが主らしい。

16px × 16px の画像と 32px × 32px の画像二つから、両方のサイズに対応したFavicon（マルチアイコン）を作ることもできるが、詳しい内容は後ほど記述する。

他に 24px × 24px や 180px × 180px などのサイズが存在。
ただ 180px × 180px くらいの大きさになると、タブではなくスマホのホーム画面上のショートカットアイコン（ウェブクリップアイコン）として用いられる。

基本的には .ico だが、ブラウザによっては .png や .gif も利用可能。

上記の形式のいずれにも対応している。

バージョンによって対応形式が異なり、IE11以上であれば .png と .gif も使えるが、それ以外では .ico のみ。
ただし Internet Explorer のサポートは2022年に停止される予定で、Microsoft Edge が主流となるらしい。

探すと色々なツールが見つかったが、今回は Image Magick を使った。
フォーマット変更やサイズ変更などをコンソールから実行できるソフトで、20年以上前からあるっぽいので驚き。

以下のコマンドから Homebrew でインストールした。

brew install imagemagick

favicon化したい元の画像 favicon.png を用意し、次のコマンドで 16px × 16px と 32px × 32px のマルチアイコン favicon.ico を作成した。
auto-resizeオプションには複数のサイズを指定でき、それらに対応したマルチアイコンが生成される。

convert favicon.png -define icon:auto-resize=16,32 favicon.ico

プロジェクトのディレクトリに使用する faviconファイルを置いたら、html の linkタグで設定する。

<link rel="icon" type="image/png" href="ファイルパス"/>

<link rel="icon" type="image/gif" href="ファイルパス">

対応ブラウザに応じた記述をしなければいけないので注意。

<link rel="icon" href="ファイルパス"/>

# 以下のどちらか
<link rel="icon" href="ファイルパス" type="image/x-icon"/>
<link rel="icon" href="ファイルパス" type="mage/vnd.microsoft.icon"/>

<link rel="shortcut icon" href="ファイルパス">

上記の記述方法のいずれでも良い。

Faviconにここまで悩むとは思っていなかった。
初めてちゃんと調べたけれど、今まで闇雲に扱ってきたことを反省。