ICOからSVGへ。2026年のFavicon実装まとめ

HTML

前田大地

2026年07月02日

ウェブサイトに設定するおなじみのFaviconですが、「あれ、どの形式を用意すればいいんだっけ？サイズは？」となり、なんだか毎回調べているような気がします。昔はicoファイルを用意すればオッケーだったのですが、今はややこしくなりました。

というわけで、2026年のFaviconのベストプラクティスについて調べましたので私の所感等をまとめたいと思います。

まずは結論から
Faviconの歴史
じゃあ結局、どれを用意すればいいの？
まとめてみた感想

まずは結論から

2026年時点では、下記のように2ファイル。favicon.svg（もしくはfavicon.png）と、apple-touch-icon.pngを用意すればオッケーです。apple-touch-iconは、180px四方でpngファイルを作って中央の140px四方に要素を配置するとバランス良いですよ。

<!-- タブ用:シンプルなロゴなら SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 写真・グラデーション等なら SVG の代わりに32px四方の PNG -->
<!-- <link rel="icon" href="/favicon.png" type="image/png" sizes="any"> -->

<!-- Appleデバイスのホーム画面・ブックマーク用180px四方の PNG -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

後方互換性を完璧にしたい！という人は、下記のように別途favicon.icoを用意しても良いですが、まあ別になくてもいいかなと個人的には思います。

<!-- icoファイルを置く場合は、sizes明示でChromeのico優先バグ回避 -->
<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">

以下は蛇足だったり詳しい説明だったり。

Faviconの歴史

別に知る必要はありませんが、Faviconの歴史を把握すると全体の流れが見えてきます。

favicon.icoの登場

Faviconは、Internet Explorer 5の時代にお気に入りリストを見やすくするための16px四方の画像が起源です。

当時のWindowsで使われていたアイコンがico形式だという理由で、Faviconにもico形式が採用されました。後にW3Cが<link rel=”shortcut icon”>としてHTML4.01に取り込んでいますが、ブラウザが勝手にルート上にあるfavicon.icoを取得していたので、linkタグを書かなくても大丈夫でした。

ブラウザが勝手にルート上のfavicon.icoを取得する習慣は、2026年である現在でも生きています。ブラウザだけでなく、RSSリーダーやSlackのリンクプレビュー、検索エンジンのクローラー、監視ツールなども、favicon.icoを直叩きしてきます。

Favicon地獄時代

Internet Explorer以外のブラウザもFaviconに対応するようになり、お気に入りリストの画像だけでなくブラウザタブなんかにも表示されるようになりました。やがて、png形式のFaviconにも各ブラウザが対応し始めます。

2007年には初代iPhoneが「ホーム画面に追加」のためのアイコンであるapple-touch-icon.pngを要求するようになりました。このときは57px四方でしたが、複数の解像度を経て180px四方に落ち着きました。

Androidにもホームアイコン機能が実装され、複数の解像度を経て192px四方と512px四方に標準化されます。

さらにはWindows 8がスタート画面のタイルにアイコンを表示するようになり、MacもSafariのピン留めタブに単色SVGを表示する独自の仕組みをつくりました。

そんなこんなで、この当時は新しいデバイスや機能が増えるたびに用意するアイコンが増えていきました。apple-touch-icon-57/60/72/76/114/120/144/152/180、favicon-16/32/96/194、android-chrome-192/512、mstile、browserconfig.xml、safari-pinned-tab.svg。これを律儀に全部生成して、全部配置していた地獄の時代があったほどです。

SVGの時代へ

Faviconまわりは大変ややこしいことになっていましたが、Windows 8のタイルがEdgeの登場で不要になったり、mask-iconはいつのまにかAppleのサイトでも使われなくなったりして、だんだんと必要になるアイコン数が減っていきました。

svg形式のFaviconは2020年くらいにはまあまあ普及していて、1つ用意すれば拡大縮小してどんなサイズにも対応できる利便性が人気でした。ただ、なぜかSafariだけが全然SVGに対応してくれなかったため、ico形式やpng形式をメインにしてSVGはおまけ、みたいな悲しい状況が続いていました。

で、ようやく2025年、Safariが重い腰をあげてSVGに対応しました。Web制作者たちは平静を装いつつもその脳内では三日三晩お祭り騒ぎをするほどでした。

じゃあ結局、どれを用意すればいいの？

では2026年現在、Faviconはどう指定するのがベストなのでしょうか。

favicon.svg（or png）＋apple-touch-icon.pngの2つでOK

通常は、favicon.svg（or png）とapple-touch-icon.pngの2つを用意すれば十分です。

<!-- タブ用:シンプルなロゴなら SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 写真・グラデーション等なら SVG の代わりに32px四方の PNG -->
<!-- <link rel="icon" href="/favicon.png" type="image/png" sizes="any"> -->

<!-- Appleデバイスのホーム画面・ブックマーク用180px四方の PNG -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

2026年時点では、Faviconの役割は主に2つあります。

ひとつは、ブラウザのタブに表示すること。これはfavicon.svg（またはpng）で対応できます。古いブラウザを考慮しなければ、どちらを使うかはデザインの性質で決められます。写真やグラデーションなどはPNGを使用したほうが無難です。それ以外は、SVGのほうがなにかと融通がききます。OS側のライト／ダーク設定に応じてカラーを変更できるのもSVGです（SVG内にCSSのメディアクエリを指定する必要があります）。

もうひとつは、ホーム画面のアイコンです。これはapple-touch-icon.pngで対応できます。180px四方のPNG画像を用意すればオッケーです（icoやsvgは使えません）。Android Chromeは、manifestアイコンが指定されていない場合、apple-touch-icon.pngにフォールバックしてホーム画面アイコンとして使ってくれます。

favicon.icoが必要になる特殊なケース

後方互換性を完璧にしたい場合、favicon.icoを使う理由は2つあります。

ひとつは、favicon.icoを勝手に参照してくるやつ対策。RSSリーダーやSlackのリンクプレビュー、検索エンジンのクローラー、監視ツールなど。これらは、linkタグを見ないでルート上のfavicon.icoに直接アクセスしてくることがあります。

もうひとつは、古いSafari対策。古いSafariはSVGに対応していません。ほとんどの人が新しいOS、新しいSafariにアップデートしていると思うのですが、会社などで古いOSを使い続けることがあるかもしれません。PNGでもいいですが、どうせならico形式を用意したほうがより完璧になります。

もし、favicon.icoを用意するなら、32px四方のみで十分です。やたらと色んなサイズを作る必要はありません。あと、HTML上にlinkタグを書くときはサイズを明記してください。サイズがないとchromeのバグでicoファイルがSVGよりも優先されてしまいます。

<!-- icoファイルを置く場合は、sizes明示でChromeのico優先バグ回避 -->
<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">

正直なところ、ico形式の有無はサイトの機能やコンバージョンを左右するようなものではありません。個人的には、いずれicoは絶滅するような気がしているので、よほど完璧を目指すとき以外は考慮しなくていいかなと。