ファビコンとは
ブラウザのタブに表示されるアイコンです。faviconは、favorite icon の略らしいです。
favicon画像について
サイズ
ファビコンの表示は、各ブラウザの実装に依存するため代表的なサイズの一覧になります。調査してましたが、沢山サイズがありすぎて全てを設定する必要はないと思います。対応するデバイスで確認して問題なければいいと判断すれば良いと思います。
| サイズ（ピクセル） | 使用箇所 |
|---|---|
| 16ｘ16 | ブラウザのタブなど |
| 32ｘ32 | ブックマークなど |
| 96 x 96 | デスクトップのショートカット |
| 180ｘ180 | iOS Safari |
| 192ｘ192 | Andoroid Chrome |
faviconの設定について
ルートディレクトリに配置すると自動でファビコンを読み込んでくれるらしいが、W3Cによると非推奨らしいです。きちんと、コードで書くのが良いです。
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192×192" href="android-chrome-192×192.png"> rel属性一覧
| icon | アイコン（ファビコンを使う以外見たことないが、ファビコン専用というわけではない） |
| apple-touch-icon | iOS Safari用のアイコン |
コメント