ガイド

ファビコン (.ico) 対 PNG

ICO と PNG は競合他社ではなく、パートナーです。最新のファビコン設定では、ユニバーサルフォールバックとして .ico を使用し、高 DPI オーバーライドとして PNG を使用します。ここはまさにそれぞれが勝利するときです。

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

ICO は、単一のファイルに複数の解像度が埋め込まれているという点で独特です。ブラウザまたは OS は描画時に最も近い一致を選択します。アップスケーリングやあいまいなエッジはありません。

PNG は、どの解像度でもより鮮明で、単色のロゴのより優れた圧縮をサポートします。 1 つのファイルに複数のサイズを埋め込むことはできません。

最適なセットアップは、1 つのマルチサイズ .ico に加えて、高 DPI ブラウザー用のスタンドアロン 32×32 および 180×180 PNG、および iOS です。

使い方

1
512×512のソースから開始
PNG または SVG。
2
両方の形式を生成する
FetchFavicon は、マルチサイズの .ico とスタンドアロンの 16/32/48/180/192/512 PNG を出力します。
3
<head> で両方をリンクします
<link rel="icon" href="/favicon.ico"> の後に <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> が続きます。

今すぐ試す

どちらのファイルサイズが小さいでしょうか?+

単一の PNG は、同じ解像度の .ico よりも小さいですが、複数サイズの .ico は 4 ～ 6 個の PNG を置き換え、通常、合計バイト数で勝ります。

Google は検索結果に PNG ファビコンを表示しますか?+

はい。 Google は .ico と PNG の両方をサポートしています。少なくとも 48×48 の正方形のアスペクト比が推奨されます。

PNGはダークモードをサポートできますか?+

直接ではありません。ダークモードをサポートするには、PNG と併せて SVG バリアントを使用してください。