faviconをsvgでスマートに設定する
はじめに
ざっくり内容
解決したいこと
- faviconの設定方法が分からん
- 沢山のサイズの画像を用意するイメージあるが、本当に正しいのか
- faviconでいろんなサイズを用意してもブラウザの仕様変わるとイタチごっこなので、１つのsvg追加だけで済ませたい
やること
サイズやカラーが変更できるsvgを利用して、全てのサイズを脳死で用意するのではなく必要な画像だけ用意してfaviconを設定する。
svgでスマートにfaviconを設定するサマリ
前提
svg favicon はsafariでは使えない。
結論
-
ある程度の解像度のfavicon用画像を用意する
-
メインのfavicon.icoを48x48で用意する
- realfavicongenerator便利だよ
- [注意]これはsvgじゃないよ
- [理由]16x16(retinaの場合は32x32)よりも大きいのでchromeがこの利用をスキップし後述のsvgを利用してくれるため。下記はイメージ。
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> -
主にsvgによるfavicon設定を採用するため、svgを用意する
- colorをテーマごと変わるようにすると良い
- widthやheightは指定しないで良いはず(これが目的なので)。崩れないためにviewBoxは指定しよう。
- sizes=’any’をsvgのfaviconに追加する
-
iOSデバイス用に180x180のpngを用意する。
- iOS8以降、iPadで180x180の解像度が必要になり、他のデバイスではダウンスケーングします。下記はイメージ。
<link rel="apple-touch-icon" href="apple-touch-icon.png"> -
android用に192x192, 512x512のpngを用意し、読み込むためのwebmanifestを用意
-
画像は全て最適化する
最終的にできるファイル
<link rel="icon" href="/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />
{
"name": "Your website name",
"short_name": "A shorter version of your website name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#4a4a4a",
"background_color": "#4a4a4a",
"display": "standalone"
}
各論
なぜsvgを使うのか
いろんなサイズを用意する呪縛から解放される
ファビコンのサイズは 48 x 48 ピクセルの倍数にしてください（48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式であれば、すべてサポートされます。
ブラウザやデバイスの進化とともに必要なサイズは上がってきました。
その都度必要なサイズを用意するのは大変なので、将来変更が不要なように必要な寸法で処理されるsvgを使いましょうという理由です。
styleを可変にできる
styleタグを含めることができ、メディアクエリなどでカラーテーマの切り替えができます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
@media (prefers-color-scheme: dark) {
.a { fill: #ffffff }
}
</style>
<path class="a" fill="#0f0f0f" d="…" />
</svg>
faviconのサイズについて
sizes='any'や42x42なのはなぜ？
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
上記のように設定している理由は、svg対応ブラウザにはsvgを利用してもらうためです。
anyとサイズ指定の理由
結局のところ、ICOに明示的なサイズを設定することは、SVGに何を設定しても、ChromeがSVGを使用するために必要だということです。
適切なサポートが追加されたときのために、SVGにsizes="any "を設定することをお勧めする
| sizes(ICO、SVG) | クロム114 | Firefox 114 | サファリ16.3 |
|---|---|---|---|
| なし、なし | ICO | SVG | ICO |
| なし、any | ICO | SVG | ICO |
| any、 なし | ICO | SVG | ICO |
| any, any | ICO | SVG | ICO |
| 32x32、 なし | SVG | SVG | ICO |
| 32x32,any | SVG | SVG | ICO |
48x48指定の理由
sizes="48x48"を設定すると、ブラウザ タブのファビコンのサイズが通常 16x16 (Retina ディスプレイでは 32x32) であるため、Chromium ブラウザは大きすぎて使用できないと判断します ( Cardello 2023 )。
chromeにICOではなく確実にSVGを選択してもらうために48をセットしています。
設定していないもの
safari-pinned-tabの設定はしない
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="">に関しては下記を参考に追加しない
Safari Pinned Icon
Safari formerly had a requirement of SVG monochrome icon for pinned tabs. However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the mask-icon anymore.
apple.comも利用していません。
Edge用のアイコンは用意しない
Microsoft Edgeは特別なアイコン形式を必要としていましたが最新では不要になりました。
Microsoft Edge used to support a special icon format to pin websites to the start menu. For recent versions of Windows, this is no longer required
shortcutは不要
Today, I learned that shortcut is not a valid link relation. Indeed, it doesn’t show up in section 4.12.5 of the HTML5 specification on ‘link types’. It is, in fact, proprietary to Internet Explorer. Without IE, rel="icon" would suffice to specify a favicon.
So, do we have to use the shortcut relation to support IE? Not at all.
IE対応しないのであれば不要とのこと。
参考にした記事
おまけ
Next.jsの場合
下記のように設定しました。
-
favicon.ico: 48x48のpngなど -
icon.svg: height, widthを削除しcolorなどを調整したsvg -
apple-icon.png: 180x180のpngなど - publicにandroid用の192x192, 512x512を設置し、web manifestファイルに指定。
Discussion