faviconの最小構成の忘備録
まずは正方形のfavicon元画像を作成。
svgとpngで出力。
favicon.svg
favicon.png
favicon generatorにfavicon.pngを投げて変換。
大量にできますが一部のみ使います。
- favicon.ico
- apple-touch-icon-180x180.png
- icon-192x192.png
- icon-512x512.png
簡単に説明
favicon.svg
モダンブラウザ用。軽い
favicon.ico
レガシーブラウザ用
apple-touch-icon-180x180.png
iphone用
icon-192 or icon-512
Android用
headタグに入れる
<head>
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<link rel='icon' id='favicon' href='/favicon.ico' sizes='any' />
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png' />
<link rel='manifest' href='/manifest.webmanifest' />
</head>
manifest.webmanifest
{
"icons": [
{ "src": "/icon-192x192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512x512.png", "type": "image/png", "sizes": "512x512" }
]
}
favicon.icoのanyはブラウザがsvg読むようにするため？
参考