ろぼいんブログ
FirefoxHTMLSafariWeb開発ニュースプログラミング解説

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

ホーム画面にSafariのアイコンが表示されている画像

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画像のアイコンもサポートされています。

参考リンク

記事をシェア

Xに共有するBlueskyに共有するMisskeyに共有するLINEに共有するThreadsに共有する

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加するXのロゴ
広告
著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

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

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。