2024年版faviconの設定方法

2024年最新のfaviconの設定方法を調べたので、メモします。

参考：TechRadio

ファイル作成

用意するアイコンファイルは5種類あれば良いようです。

1. favicon.ico（32 x 32）
2. icon.svg（特にサイズ指定はないが32 x 32）
3. apple-touch-icon.png（180 x 180）
4. icon-192.png（192 x 192／manifest内）
5. icon-512.png（512 x 512／manifest内）

4と5は「manifest.webmanifest」というマニフェストファイルを作って、そこに記載するようですね。

SVGは、イラストレーターで32×32の枠にベクターで作成し、保存します。
次にそれをSVGで書き出せばOKです。
ベクターなのでサイズは小さくてもいいみたいですね。

pngは、SVG作成の際のデータを使って、各サイズに書き出します。

icoファイルは、上記で作った32×32のpngを、ここのツールでicoに変換します。

実際のコード

htmlコードはこちら

<link rel="icon" href="/favicon/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/favicon/manifest.webmanifest">

マニフェストファイルはこちら
manifest.webmanifest

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

パスは適宜読み替えてください。
ここでは「favicon」フォルダを作ってそこに入れています。

シンプルですね！
今回は以上です！