ファビコンの ICO と PNG
ICO は普遍的ですが古いものです。 PNG は最新ですが、明示的なリンクが必要です。両方を一緒に使用する方法は次のとおりです。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
ICO: ユニバーサル フォールバック
すべてのデスクトップ ブラウザは、何もしなくても /favicon.ico を取得します。複数の解像度を保持できるコンテナです。
Windows ショートカットとファイル エクスプローラーは .ico に依存しているため、Web ファビコンを気にしない場合でも、OS 用のファビコンを同梱してください。
PNG: あらゆる密度でピクセルパーフェクト
PNG を <link rel="icon" size="..."> とリンクすると、高 DPI ディスプレイで鮮明にレンダリングされます。
Web マニフェストには 192×192 および 512×512 PNG を使用し、apple-touch-icon には 180×180 を使用します。
評決: 両方を使用する
ユニバーサル サポート用のマルチサイズ .ico に加えて、HD ディスプレイ用の PNG バリアントと PWA インストール プロンプトを出荷します。最もシャープでスケーラブルなアイコンを作成するには、上部に SVG を追加します。
よくある質問
Should I use ICO or PNG for a favicon?
Use both: ICO for universal /favicon.ico fallback and PNG for high-DPI tabs and PWA manifest icons.
Does every browser support PNG favicons?
Modern browsers do when you link them with <link rel="icon" type="image/png">. ICO remains the safest default.
Is ICO outdated?
ICO is older but still required for Windows shortcuts and automatic /favicon.ico discovery by browsers.