faviconの形式の違い：SVG・PNG・ICOの使い分け

複数サイズ入りのfavicon.ico、ロゴが本物のベクターならSVGのfavicon、180pxのApple touchアイコン、Webマニフェストをリンクしましょう。SVGのfaviconは最新のChrome、Edge、Firefox、Operaで使え、Safariはバージョン26からです。サイズ別のPNG faviconはタグに入れないのがおすすめで、下の実例パッケージですべてのファイルを確認できます。

それぞれの形式の役割

faviconは1つのファイルではありません。ブラウザ、OS、ブックマークツールはそれぞれ別のファイルを探します。HTMLの仕様では、ページが複数のアイコンを宣言でき、どれを使うかはブラウザに任されています。

ファイル	形式	用途
`favicon.ico`	ICO（1つのファイルに複数のビットマップ）	予備。アイコンのリンクがない場合、ブラウザはサイトのルートにある`/favicon.ico`を要求することがあります。このパッケージには16、32、48pxの画像が入っています。
`favicon.svg`	SVG	SVGのfaviconに対応したブラウザ用の、拡大縮小できる1つのファイル。明るい色と暗い色を自分で持てます。
`favicon-16x16.png`、`favicon-32x32.png`	PNG	タブアイコンのラスター版。PNGのfaviconを求めるサイト作成ツールなどに。
`apple-touch-icon.png`	PNG、180×180px	iPhoneやiPadで、サイトをホーム画面に追加したときのアイコン。
`site.webmanifest`	JSON	インストールできるWebアプリの名前、色、アプリアイコン（PWAのmaskableアイコン：セーフゾーンと設定方法を参照）。

ICOはいちばん古い形式で、今でもいちばん広く読まれています。HTMLの仕様では、ページがアイコンを宣言していないときの/favicon.icoの要求は、ブラウザが「行ってもよい」ものとされています。そのため安全網と考え、それでも明示的にリンクしておきましょう。MDNによると、ICOファイルは複数のサイズを保存できるので、1つのファイルで16、32、48pxをカバーできます。

SVGは、どのサイズでも、どの画素密度でもくっきりしたままの唯一の形式です。SVG内の<style>ブロックでprefers-color-schemeを使って色を切り替えられるので、暗いロゴでも暗いタブバーの上で見えるようにできます。サーバーはimage/svg+xmlとして配信する必要があります。Can I useによると、ChromiumベースのブラウザとFirefoxはこのタイプを必要とします。

PNGのfaviconはただのビットマップで、通常はsizes属性付きでリンクします。仕様ではsizesは参考情報とされていて、ブラウザはいちばん近いファイルを選ぶのに使ってもよいものの、使う義務はありません。これは良し悪しで、次のセクションで説明します。

どのブラウザがどれを使うか

2026年9月28日に確認したCan I useのデータによると、SVGのfaviconに対応しているのは、ChromeとEdgeがバージョン80から、Firefoxが41から、Operaが67から、SafariがmacOSでもiOSでも26.0からです。Safari 18以前はSVGのfaviconを使わないため、PNGとICOのファイルに頼ります。WebKitチームはこの変更を、2025年9月のSafari 26.0のリリース記事で発表しました。古いSafariを使っている人にはラスターのアイコンが表示され続けるので、SVGのfaviconがラスター版の代わりになることはありません。

ページが複数のアイコンを宣言している場合、HTMLの仕様では、ブラウザがいちばん適したものを選び、同じくらい適したものが複数あるときは最後に宣言されたものが使われます。読めない形式などでファイルが使えないとわかれば、次のファイルに移ります。「いちばん適した」の判断はブラウザ任せです。宣言されたサイズで選ぶブラウザなら、順番に関係なく、サイズを宣言していないSVGよりsizes="32x32"付きのPNGを優先するかもしれません。そのため、下のスニペットではサイズ別のPNGを一切リンクしていません。ラスターのサイズはICOがカバーし、SVGはその後に置きます。

ひとつ、ブラウザのベンダーではなく現場の経験から来た細かい点があります。Evil Martiansのfaviconの記事は、「ChromeがSVGよりICOファイルを選んでしまうバグを直すため」にICOのリンクにsizes="32x32"を付けることを勧めていて、更新履歴によると、2023年7月にこの理由でsizes="any"から変更しています。記事にはChromiumのバグ報告へのリンクがなく、私たちも見つけられていないので、現場の経験として読んでください。ジェネレーターはこの助言に従っています。ICOには実際に32pxの画像が入っているので、害はありません。

Apple touchアイコン。 Appleのアーカイブ版Safari Web Content Guideには<link rel="apple-touch-icon">が記載され、Retina iPhone用に180×180pxが挙げられています。MDNによると、iOSはホーム画面のアイコンに通常のrel="icon"のリンクを使いません。透明なピクセルがどうなるかはAppleのドキュメントには書かれていません。Appleの開発者フォーラムの回答（Appleではなく別の開発者によるもの）では、黒く表示されるとされています。そのためジェネレーターは、このファイルを必ず、選んだ背景色の上の不透明な画像にしています。

テーマカラーはいちばん当てにならない部分です。Can I useでは、Firefoxは<meta name="theme-color">に対応しておらず、デスクトップ版ChromeはインストールされたWebアプリでのみこの色を使うとされています。Can I useとMDNはどちらも、Safari 26からはインストールされたWebアプリでのみ適用されるとしています。Android版ChromeとiOS 26のSafariについては、両者の細かい記述が食い違っています。タグは入れておきつつ、デザインをこれに頼らないようにしましょう。

Safariのピン留めタブ用の、Appleの古いmask-iconリンクは、アーカイブ版のドキュメントにまだ載っています。廃止を告げる公式の記述は見つかりませんでしたが、必要とする記述も見つかりませんでした。このパッケージには含めていません。

用意すべき最小限のセット

ベクターのアートワークがあるサイトなら、favicon.ico、favicon.svg、apple-touch-icon.pngをリンクし、サイトをインストール可能にしたい場合は192pxと512pxのアイコンを含むマニフェストを加えます。これはEvil Martiansの記事が最終的に勧めているセットと同じです。PNGのfaviconは、それを求めるツールのためにサーバーに置いておけばよく、linkタグは不要です。ロゴがビットマップしかないサイトなら、SVGは省きましょう。PNGをSVGファイルで包んでもビットマップのままで、得るものはありません。SVGのfaviconが欲しい場合は、先に本物のベクターパスにトレースしてください。

HTMLスニペット

下の実例パッケージで、ファイルをサイトのルートに置いた場合に、ジェネレーターがfavicon.htmlに書き出すタグです。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">

ファイルを/assets/icons/のようなフォルダーに置く場合は、favicon作成でそのフォルダーをパスのプレフィックスに指定すると、すべてのhrefがそれに合わせて変わります。また、アイコンをリンクしていないページでブラウザが探しに来るので、favicon.icoはサイトのルートにもコピーしてください。PNG、JPG、WebPから作った場合は、SVGの行を除いた同じタグになります。

ダウンロードできる実例

このサイト自身のロゴ（誰かのアップロードではなく、リポジトリにあるSVG）を、名前「png2svg.art」、テーマカラー#0a2d8f、背景#e8efff、余白8%でfavicon作成にかけました。その後は何も編集していません。ツールが作るファイルそのままです。

32pxのfavicon（実寸）：

背景色の上の不透明な、180pxのApple touchアイコン：

実例パッケージ一式をダウンロード（ZIP）：favicon.svg、favicon.ico、2つのPNG favicon、Apple touchアイコン、4つのアプリアイコン、site.webmanifest、favicon.html、READMEが入っています。

faviconを確認する

アップロードしたら、プライベートウィンドウでページを開いてください。ブラウザはfaviconを長い間キャッシュするので、通常のウィンドウで古いアイコンが表示されても何の証拠にもなりません。開発者ツールのネットワークパネルで、favicon.svgがimage/svg+xmlとして配信され、すべてのファイルが200を返すことを確認します。ライトモードとダークモードでタブを確認し、スマートフォンのホーム画面にページを追加してタッチアイコンも確かめましょう。