Closed shimopino closed 1 year ago
favicon.icoは Favorite Icon
の略で、Webサイトのアイコンやショートカットアイコンとして、ブラウザのアドレスバーやブックマークリスト、タブなどに表示されるロゴ画像のこと
ブラウザはWebサイトにアクセスした時に、自動的にそのサイトのルートディレクトリで favicon.ico
ファイルを探して、それを表示する。
HTMLで link 要素を使用して指定することもできる。
<link rel="icon" href="path_to_your_favicon.ico">
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
様々なサイズのfaviconアイコン画像を作成するのではなく、SVGとブラウザのダウンスケーリングを利用できる。この考え方に従って、必要最小限のファイルを準備する。
favicon.ico
を配置するsizes=any
を設定rel="icon", type="image/svg+xml"
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="path.webmanifest">
Faviconセットの作り方
inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"
そもそものFaviconに対する理解度を上げる