画像から、各サイズのファビコン（ブラウザのタブに表示される小さいアイコン）を生成します。設置用のHTMLも確認できます。
必要なサイズ
| サイズ | 用途 |
|---|---|
| 16×16 / 32×32 | ブラウザのタブ、ブックマーク |
| 180×180 | iOSのホーム画面（apple-touch-icon） |
| 192×192 / 512×512 | Androidのホーム画面、PWA |
設置のしかた
ファイルはサイトのルートに置くのが基本です。SVG形式に対応しておくと、拡大しても劣化せず、ダークモード用の色分けも可能になります。
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
デザインのコツ
- 16pxで見えるかがすべてです。ロゴをそのまま縮小すると潰れます
- 文字を入れるなら1文字まで
- 背景を透過にするか、ブランドカラーで塗りつぶすかを決める
- 細い線は消えるため、太めの形にする
よくある質問
Q ファビコンが反映されません
ブラウザのキャッシュが原因のことが多いです。強制再読み込みや、シークレットウィンドウで確認してください。
Q .icoファイルは必要ですか？
古い環境への対応として用意しておくと安心です。現在はPNGやSVGでも動作します。
Q どのサイズを用意すればいいですか？
最低でも32×32と180×180があれば、主要な環境をカバーできます。
Q 元画像は何pxで用意すべきですか？
512×512px以上の正方形があれば、すべてのサイズを生成できます。