Webサイト制作・開発に関わっていると必ず設定する機会が訪れるもののひとつがファビコンです。
「毎回どれを設定すればいいんだっけ？」と迷うので、今回記事にまとめておくことにしました。
ファビコンとは
ファビコンとは、ブラウザのタブやブックマークに表示される小さなアイコンです。
ユーザーがあなたのサイトを記憶しやすくする重要な要素であり、複数のサイズや形式を用意することで、様々なデバイスやブラウザに対応することができます。
なぜ複数のfaviconが必要なのか？
- デバイスの多様化：
スマートフォン、タブレット、デスクトップPCなど、表示するデバイスによって最適なサイズが異なるため - ブラウザの差異：
各ブラウザが異なるサイズのアイコンを優先的に表示する場合がある - OSの差異：
iOSやAndroidなど、OSによってアイコンの表示方法が異なる場合がある
用意すべきファビコンの種類とサイズ
一般的に、以下のサイズのfaviconを用意することが推奨されます。
| ファイル名 | 推奨サイズ | 用途 |
|---|---|---|
| favicon.ico | 16×16 32×32 48×48 | 古いブラウザやデフォルトで最初に参照されるアイコン よく使うツール：https://favicon-generator.mintsu-dev.com/ |
| icon.svg | – | 高解像度ディスプレイやサイズが柔軟に変更可能な環境での利用 |
| apple-icon.png | 180×180 | iOSデバイスのホーム画面に追加されたときのアイコン →背景色＋余白ありのファビコンを用意する （iPhoneのホーム画面では透過した部分が黒くなる仕様のため） |
| icon-192.png icon-512.png | 192×192 512×512 | PWAやAndroidデバイスのホーム画面 → |
| favicon-16×16.png favicon-32×32.png | 16×16 32×32 | モダンブラウザでの表示 →16×16はタブやアドレスバー →32×32は高解像度ディスプレイ用 |
| safari-pinned-tab.svg | – | macOSのSafariで、タブにピン留めした際のアイコン表示 |
今回調べている中で知ったこと
- ブラウザはファビコンをバックグラウンドでダウンロードするため、ファビコン画像のサイズはWebサイトのパフォーマンスに影響しない📝
ファビコンの設定方法
HTML
HTMLは下記のように記載します。
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">manifest.json
// manifest.json
{
"name": "MyApp",
"short_name": "MyApp",
"description": "My awesome PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3f51b5",
"icons": [
{
"src": "icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
