2025年にFaviconを準備する方法

xguru · 2025-02-13T10:02:02+09:00

faviconの作り方が複雑になり、単にブラウザのタブやタッチスクリーンにWebサイトのロゴを表示するためだけに20個以上のPNGファイルを使うことが多いその代わりとして、比較的少ない数のアイコンファイルと最小限の設定でほとんどの環境をカバーできる方法を提案とてもシンプルなバージョン複雑な設定をしなくても、重要な5種類のアイコンと1つのJSONファイルだけで十分 HTMLに入れる基本リンクの例 <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> PWA（Progressive Web App）をサポートするなら次も追加する <link rel="manifest" href="/manifest.webmanifest"> manifest.webmanifestファイル構造の例 { "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } maskableアイコンは端が一部切り取られることがあるため、409×409の円形領域をセーフゾーンにしておくのがよいこれだけでも主要なブラウザとデバイスの大半でfaviconは問題なく動作する詳細説明バージョン faviconは「favorite icon」に由来し、ブラウザのタブなどに表示される小さなアイコン Safariも最近ではfaviconをきちんとサポートしている解像度ごとのアイコンセットを大量に作る代わりに、SVG、いくつかのPNGアイコン、そしてシンプルなmanifestを活用して効率よく対応できる究極のFavicon構成 1つのSVGファイルと最低限のPNGファイル数枚、そしてweb manifestファイルによって、さまざまなブラウザやデバイスで一貫したアイコン表示が可能 SVGはベクターフォーマットなので必要に応じて自由に拡大・縮小でき、バックグラウンドダウンロードのため性能面の負担も小さい PNGはApple向け（apple-touch-icon）やPWA向けアイコンなど、本当に必要なサイズだけ用意する Windowsタイルアイコン、Safari Pinned Icon、rel=“shortcut” などの旧形式は、最近のブラウザではそれほど必要ではなくなった古いブラウザやツールでは /favicon.ico パスから直接アイコンを取得する場合があるため、ルートパスのfavicon.icoは依然として重要 Ultimate Favicon Setの作り方以下の手順はアイコンを直接作成し、最適化するプロセス 1段階目: SVGを用意正方形比率を保ったicon.svgファイルを用意する必要がある <svg> 内でCSSメディアクエリを使い、ライト・ダークモードに対応する色の切り替えを実装できる例のように @media (prefers-color-scheme: dark) を活用してダークモード用の色を指定できる 2段階目: ICOファイルを作る 16×16または32×32サイズでicon.svgをラスター画像に変換し、favicon.icoを作成する GIMPやInkscape+ImageMagickのようなツールを使える小さな解像度でロゴがつぶれすぎないよう注意する 3段階目: PNG画像を作る 512×512、192×192、180×180、512×512（maskable）サイズのPNGアイコンを用意する iOS向けapple-touch-iconは180×180で作成し、背景色を入れるか適切な余白を設けるとよい maskableアイコンは409×409領域をセーフゾーンにしなければならない 4段階目: PNGとSVGを最適化 SVGはSVGOなどで圧縮し、PNGはSquooshで圧縮率を高めるユーザーが通信量制限のある環境にいる可能性もあるため、ファイルサイズの最小化は有利 5段階目: HTMLにアイコンを接続基本的にfavicon.ico、icon.svg、apple-touch-icon.pngを <head> タグに接続する <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Webpackなどを使うなら、ビルド時にハッシュを含めてキャッシュを管理することもできるステージング（開発）環境と本番環境を区別するために、異なるfaviconを使うこともできる 6段階目: Web Manifestを作る manifest.webmanifestファイルにPWA用アイコン情報を入れ、<link rel="manifest" href="/manifest.webmanifest"> で接続する以下の例では192×192、512×512（maskable）、512×512アイコンを指定している { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Webpack環境ではwebpack-pwa-manifestのようなプラグインを活用して自動化できる上記のような手順を踏めば、少ない数のファイルでも大半のブラウザとデバイスで適切なfaviconを表示できる自動化ツールを作って運用すればさらに便利

(evilmartians.com)

50 ポイント投稿者 xguru 2025-02-13 | 4件のコメント | WhatsAppで共有

faviconの作り方が複雑になり、単にブラウザのタブやタッチスクリーンにWebサイトのロゴを表示するためだけに20個以上のPNGファイルを使うことが多い
その代わりとして、比較的少ない数のアイコンファイルと最小限の設定でほとんどの環境をカバーできる方法を提案

とてもシンプルなバージョン

複雑な設定をしなくても、重要な5種類のアイコンと1つのJSONファイルだけで十分

HTMLに入れる基本リンクの例

&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;&lt;!-- 180×180 --&gt;

PWA（Progressive Web App）をサポートするなら次も追加する

&lt;link rel=&quot;manifest&quot; href=&quot;/manifest.webmanifest&quot;&gt;

manifest.webmanifestファイル構造の例

{  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

maskableアイコンは端が一部切り取られることがあるため、409×409の円形領域をセーフゾーンにしておくのがよい
これだけでも主要なブラウザとデバイスの大半でfaviconは問題なく動作する

詳細説明バージョン

faviconは「favorite icon」に由来し、ブラウザのタブなどに表示される小さなアイコン
Safariも最近ではfaviconをきちんとサポートしている
解像度ごとのアイコンセットを大量に作る代わりに、SVG、いくつかのPNGアイコン、そしてシンプルなmanifestを活用して効率よく対応できる

究極のFavicon構成

1つのSVGファイルと最低限のPNGファイル数枚、そしてweb manifestファイルによって、さまざまなブラウザやデバイスで一貫したアイコン表示が可能
SVGはベクターフォーマットなので必要に応じて自由に拡大・縮小でき、バックグラウンドダウンロードのため性能面の負担も小さい
PNGはApple向け（apple-touch-icon）やPWA向けアイコンなど、本当に必要なサイズだけ用意する
Windowsタイルアイコン、Safari Pinned Icon、rel=“shortcut” などの旧形式は、最近のブラウザではそれほど必要ではなくなった
古いブラウザやツールでは /favicon.ico パスから直接アイコンを取得する場合があるため、ルートパスのfavicon.icoは依然として重要

Ultimate Favicon Setの作り方

以下の手順はアイコンを直接作成し、最適化するプロセス
1段階目: SVGを用意
- 正方形比率を保ったicon.svgファイルを用意する必要がある
- <svg> 内でCSSメディアクエリを使い、ライト・ダークモードに対応する色の切り替えを実装できる
- 例のように @media (prefers-color-scheme: dark) を活用してダークモード用の色を指定できる
2段階目: ICOファイルを作る
- 16×16または32×32サイズでicon.svgをラスター画像に変換し、favicon.icoを作成する
- GIMPやInkscape+ImageMagickのようなツールを使える
- 小さな解像度でロゴがつぶれすぎないよう注意する
3段階目: PNG画像を作る
- 512×512、192×192、180×180、512×512（maskable）サイズのPNGアイコンを用意する
- iOS向けapple-touch-iconは180×180で作成し、背景色を入れるか適切な余白を設けるとよい
- maskableアイコンは409×409領域をセーフゾーンにしなければならない
4段階目: PNGとSVGを最適化
- SVGはSVGOなどで圧縮し、PNGはSquooshで圧縮率を高める
- ユーザーが通信量制限のある環境にいる可能性もあるため、ファイルサイズの最小化は有利
5段階目: HTMLにアイコンを接続
- 基本的にfavicon.ico、icon.svg、apple-touch-icon.pngを <head> タグに接続する
```
&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;  
```
- Webpackなどを使うなら、ビルド時にハッシュを含めてキャッシュを管理することもできる
- ステージング（開発）環境と本番環境を区別するために、異なるfaviconを使うこともできる

6段階目: Web Manifestを作る

manifest.webmanifestファイルにPWA用アイコン情報を入れ、<link rel="manifest" href="/manifest.webmanifest"> で接続する

以下の例では192×192、512×512（maskable）、512×512アイコンを指定している

{  
  &quot;name&quot;: &quot;My website&quot;,  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

Webpack環境ではwebpack-pwa-manifestのようなプラグインを活用して自動化できる

上記のような手順を踏めば、少ない数のファイルでも大半のブラウザとデバイスで適切なfaviconを表示できる
自動化ツールを作って運用すればさらに便利

4件のコメント

carnoxen 2025-02-15

SVG Favicon は、まだ Firefox ではサポートされていないので…

carnoxen 2025-02-15

あ、Safariでしたね

yeppyshiba 2025-02-13

以前の会社で手がけたプロジェクトでWebゲームを実装したのですが
暇つぶしにイースターエッグとしてアニメーションfaviconを実装してみたところ、
sprintsheetでアニメーションを実装したらかなりそれっぽくなりました

xguru 2025-02-13

2021年のためのFaviconまとめ
4年前に一度投稿しましたが、最近の状況に合わせて更新されました。