Safari 26 betaがついにSVGファビコンをサポート！Firefoxから14年遅れ

Safari 26 betaにて、ついにSafariがSVGファビコンをサポートしたことが判明しました。

SVGファビコンのサポートは、Firefoxから実に14年遅れとなります。

ブラウザーのタブなどに表示されるWebサイトのアイコン（ファビコン）には、.ico、.png、.svgなどのファイル形式が使われてきました。

とくにSVGファイルはベクター形式のため、一般的にベタ塗りが多いファビコンでは、PNGファイルよりもファイルサイズが小さいことが多く、あらゆる解像度でクリアに表示できるという特徴があります。

また、ここ数年はダークモードをサポートするWebサイトが増えており、SVGは1つのファイルでライトモードとダークモードの両方の画像を表現できることも便利な点のひとつです。

ところがSafariは、これまでSVG形式のファビコンをサポートしていませんでした。

Web技術の互換性を調べられる 「Can I use...」のデータ によると、Firefoxは2011年から部分的にSVGファビコンをサポートしており（完全なサポートは2015年から）、ChromeとEdgeは2020年からサポートしていました。

Safari 26.0 betaのリリースノートによると、アイコンにSVGを利用した場合、Safariはさまざまな場所で使用するため、さまざまなサイズのラスタライズされたアイコンを作成するとのことです。

SVG画像は、Safariのタブに表示されるファビコンのほかに、次のような場所でも利用できるようになりました。

• お気に入りのメニュー
• Safariのスタートページ
• リーディングリスト
• iCloudタブ
• 提案
• お気に入り
• ユーザーのホーム画面
• Dock
• Safariのタブやメニュー

Safariがベータ版でSVGファビコンをサポートしたことで、今後は、Safari向けにPNGを用意してほかのブラウザー向けにSVGを用意するという手間が不要になります。

ただしSafariは、1つのSVGファイルでライトモードとダークモードを切り替える機能に対応していません。

SVG画像のライトモードとダークモードの切り替えには、SVG内でprefers-color-schemeメディアクエリーを使いますが、Safariはprefers-color-scheme: darkを無視する一方で、prefers-color-scheme: lightのスタイルはたとえダークモードであっても常に読み込まれるというバグがあります。

このバグがSVGファビコンにも引き継がれているかは不明ですが、ダークモードをサポートしているWebサイトでSVGファビコンを使おうとしている場合には、注意が必要です。

また、Safari以外のブラウザーでも、PDFファイルや画像ファイルを開いたときにタブに表示されるファビコンは/favicon.icoに固定されているため、引き続き.icoファイルは必要です。

なお、Safari 26 betaではSVGファビコンのほかに、データURL画像のアイコンもサポートされています。

参考リンク

• Safari 26.0 Beta Release Notes | Apple Developer Documentation
• News from WWDC25: WebKit in Safari 26 beta | WebKit
• 199134 – SVG images don't support prefers-color-scheme adjustments when embedded in a page

ろぼいん

XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。