Faviconについて

5537 ワード
favicon Webアプリケーション favicon テキストリンク

はじめに

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

Faviconとは

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

サイズ

以下の二つが主らしい。

  • 16px × 16px
    ブラウザのタブ部分で使用。

  • 32px × 32px
    Retina対応ブラウザのタブ部分で使用。
    なお、RetinaはApple社が開発した高画質ディスプレイを指す。

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

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

ファイル形式

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

Chrome / Firefox / Safari / Opera / Edge

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

Internet Explorer

バージョンによって対応形式が異なり、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タグで設定する。

.png形式の場合

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

.gif形式の場合

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

.ico 形式の場合

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

Internet Explorer

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

Chrome / Firefox / Safari / Opera / Edge

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

おわりに

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

参考