faviconは意外と奥が深い
faviconは結構奥が深いので、簡単にポイントを押さえておく。
faviconとは
hr.icon
ブラウザのタブやブックマークに利用される画像のこと。
昔はブラウザのタブだけで利用されていたが、多様化が進む中で、様々なところで利用されるようになった。
faviconと言う名前ではないが、apple-touch-iconもfaviconと一緒に設定する画像。
最近はPWAというWebサイト・アプリをネイティブアプリのように利用できる仕組みがあり、そこでも同じような画像を設定する。
faviconの基本的な設定方法
hr.icon
以下のことを抑えとくといい
普通のfavicon, apple-touch-icon, PWAのそれぞれの画像設定
faviconはhtmlの<head>にて設定する。
apple-touch-iconは普通のfaviconと少し記述内容が異なる。
PWAのアイコン画像設定は更にもう少し違う。
faviconに利用できる画像の拡張子は代表的なもので、.png, .svg, .icoなど。
※ .icoはマルチアイコンと言って、中身に様々なサイズの画像を設定できる。
用意してる画像サイズ分の強さしか発揮しないことに注意。
32 x 32の画像しか中に入ってないなら、他サイズは入ってないと言うこと。
普通のfavicon, apple-touch-icon, PWAのそれぞれの画像設定
faviconはhtmlの<head>にて設定する
code: html
<head>
<link rel="icon" href="/icon.svg" type="image/svg+xml">
(<link rel="icon" href="/favicon.ico">)
</head>
基本的には.svg拡張子のfaviconを設定しておくのが良い。
svgで設定しておくと、画像のボケボケになるとか無くなる。
.png拡張子でももちろん設定できるが、.svgで設定するのがやはりおすすめ。
favicon.icoを最終防衛ラインとして追加しておくといい。.svgに対応してないブラウザがあったとき、代わりにこの画像が利用される。
参照:faviconについて調べてみた | backport
apple-touch-iconは普通のfaviconと少し記述内容が異なる。
code: html
<head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
Appleのホーム画面でのアイコンなどに利用される画像を設定する。
PWAのアイコン画像設定は更にもう少し違う。
headに以下を設定した後、そのmanifestファイルを用意する。
code: html
<head>
<link rel="manifest" href="/manifest.webmanifest">
</head>
manifest.webmanifestは以下のような設定
code: json
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
基本的なfavicon戦略
hr.icon
参考記事:2021年のファビコンを極める: 本当に必要なファイルはほぼ6つ(翻訳)|TechRacho by BPS株式会社
戦略
1. .svg画像は必ず設定しておく
2. .ico画像も設定しておく
3. apple-touch-iconも設定するならそうしとく
4. PWAも設定しておくなら、設定する
参考記事
2021年のファビコンを極める: 本当に必要なファイルはほぼ6つ(翻訳)|TechRacho by BPS株式会社
faviconについて調べてみた | backport
【簡単!2019年版】綺麗で粗くないfavicon(ファビコン)画像の作り方 | ぱらげ
favicon大解剖 〜必要サイズから検証時の注意点まで〜 | WebNAUT