faviconの準備

[shimopino]

そもそものFaviconに対する理解度を上げる

• ChatGPTに聞く
• https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• https://ao-system.net/favicon/
• https://ja.wikipedia.org/wiki/Favicon
• https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html

[shimopino]

favicon.icoは Favorite Icon の略で、Webサイトのアイコンやショートカットアイコンとして、ブラウザのアドレスバーやブックマークリスト、タブなどに表示されるロゴ画像のこと

[shimopino]

ブラウザはWebサイトにアクセスした時に、自動的にそのサイトのルートディレクトリで favicon.ico ファイルを探して、それを表示する。

HTMLで link 要素を使用して指定することもできる。

<link rel="icon" href="path_to_your_favicon.ico">

[shimopino]

<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" }
  ]
}

[shimopino]

様々なサイズのfaviconアイコン画像を作成するのではなく、SVGとブラウザのダウンスケーリングを利用できる。この考え方に従って、必要最小限のファイルを準備する。

• ICOファイル
  • 実際にはディレクトリ構造を持っている。異なる解像度のファイルをパックでき、32x32があれば、うまくダウンスケールできない場合を除き、16x16ファイルは必要ない
  • レガシーブラウザに対応するにはルートディレクトリに favicon.ico を配置する
  • Chromeのバグ対応用に sizes=any を設定

---

• SVG
  • rel="icon", type="image/svg+xml"

---

• 180 x 180 png
  • Apple Touch Iconは、アップルのホーム画面のショートカット画像として利用される
  • <link rel="apple-touch-icon" href="apple-touch-icon.png">
  • iPadでは 180 180 の解像度が必要となった
  • アイコンの周りに20pxのパディングを置いて、背景色を追加すると見栄えが良い

---

• Manifest
  • ブラウザがシステムアプリケーションとしてウェブサイトをインストールするためのすべての詳細を含む
  • <link rel="manifest" href="path.webmanifest">
  • 192×192はホーム画面に表示され、512×512はPWAがロードされているときにスプラッシュ画面として使用

[shimopino]

Faviconセットの作り方

---

• まずは正方形のSVGファイルを用意する
  • ChatGPTを使えばいけるかも

---

• SVGからfavicon.icoを生成する
  • https://www.gimp.org/
  • 32 bpp, 8-bit alpha, no palette

---

• pngに変換

inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"

---

• 最適化
  • https://github.com/svg/svgo