Apple Touch IconのSVG対応：実際に動く設定方法

<link rel='icon' type='image/svg+xml'> を使って、美しい SVG ファビコンをサイトに追加しました。Chrome では鮮明に、ダークモードでも完璧にスケールします。ところが、iPhone ユーザーがあなたのサイトをホーム画面に追加すると、鋭いロゴマークではなく、ぼやけたページのスクリーンショットが表示されてしまいます。

あなたのやり方が間違っているわけではありません。Apple Touch Icon と SVG は Apple にとって別物であり、その関係性にベテラン開発者でさえ悩まされます。本記事では、現状の Safari と iOS で実際に動く設定と、あらゆる場面でシャープに表示させるための構成方法を紹介します。

短い結論: Apple は apple-touch-icon の SVG を公式サポートしていない

apple-touch-icon のリンク関係に関する Apple のドキュメントでは、これまで一度も SVG がサポート対象フォーマットとして記載されたことがありません。iOS はホーム画面のアイコンに対して、いまでも PNG(あるいはあまり一般的ではありませんが JPEG)ビットマップを期待しており、ファイルを選ぶ基準は MIME タイプではなく size 属性です。

しっかりとサポートされているのは、rel='icon' 経由の SVG ファビコンです。Safari はこれをブラウザタブやピン留めタブのために読み込みます。WHATWG HTML Living Standard では、ページアイコンを宣言する仕組みとして rel='icon' キーワードを定義しており、Safari iOS は SVG についてこれをクリーンに実装しています。ただし、ホーム画面へのアイコンとは別のコードパスです。

したがって、開発者が apple touch icon SVG support を検索するときの正直な答えは「両方配信する」となります。タブには SVG を、ホーム画面には PNG を使ってください。apple-touch-icon に SVG ファイルを指定しても、iOS では何も言わずにページのスクリーンショットへフォールバックされ、まさにあなたが回避したいと思っているぼやけたアイコンが表示されてしまいます。

前提条件

クリーンな SVG ソースファイル(viewBox が 0 0 100 100 のような正方形、できれば 5 KB 以下)
同じデザインを 180×180 で PNG エクスポートしたもの(背景は不透明)
サイトの <head> へのアクセス権、および Web ルートにファイルを配置できる環境

実際に動作する構成(ステップバイステップ)

ステップ 1: SVG ファビコンをサイトルートに配置する

SVGファイルを/icon.svg（index.htmlと同じ階層）に配置してください。icon.svgという名前にしておくのは意図的なものです。Safariは<link>タグを走査する前にこのパスを確認するためで、結果として<head>内がすっきりと保たれます。

Step 2: 180×180のPNG apple-touch-iconを生成する

Figma、Sketch、その他任意のラスター書き出しツールを使って、同じSVGから180×180のPNGを生成してください。サイトルートに/apple-touch-icon.pngとして保存します。<link>タグがなくてもiOSはこのファイルを採用しますが、タグを明示した方がiOSの各バージョン間でより確実に動作します。

SVGを再トレースせずにクリーンな180×180のPNGへ変換したい場合は、Mzu favicondlがワンクリックで書き出しを行います。

Step 3: linkタグを正しい順序で追加する

ブラウザのパース順序は重要です。まずSVGを置くことでモダンブラウザがそれを読み取り、その次に明示的なPNGのフォールバックを記述します。パターンは次のとおりです。

<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

apple-touch-iconのlinkタグにはtype属性が付いていない点に注目してください。Appleは歴史的にこれを無視しており、古いiOSでは対応していないMIMEタイプが宣言されているとタグ自体が拒否されてしまう場合があります。sizes='180x180'属性は、高密度ディスプレイのiPhoneでこのレンダリングを使うようiOSに伝える指定です。

Step 4（任意）: 152×152のフォールバックで古いiPadに対応する

アクセス解析でiOS 14以前のiPadユーザーが確認できる場合は、180の前に152×152のフォールバックを追加してください。

<link rel='apple-touch-icon' href='/apple-touch-icon-152.png' sizes='152x152'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

ブラウザとiOSは、要求された密度を満たしつつ最小のアセットを選択します。レガシーiOSの解像度について詳しくは、Apple Touch Iconサイズガイドを参照してください。

よくある落とし穴

apple-touch-iconにSVGファイルを指定してしまう。 iOSは静かにページのスクリーンショットへフォールバックします。そのURLには必ず本物のPNGを配置してください。
apple-touch-iconのlinkにtype='image/svg+xml'を付けてしまう。 一部の古いiOSビルドではタグ自体を完全に拒否します。apple-touch-iconのlinkにはtypeを付与しないでください。
正方形のアスペクト比を忘れてしまう。 iOSはアイコンをクロップしないため、正方形以外のPNGはレターボックス化されます。必ず正方形のSVG viewBoxから書き出してください。
透明PNGが起動画面で透けてしまう。 iOSは独自の角丸長方形マスクを適用しますが、コールドスタートの起動画像中、透明背景がまだ裏側を透かす可能性があります。透過が特に必要な場合を除き、不透明な背景を使用してください—詳しくはapple touch icon transparent guideで解説しています。

実機での検証方法

エミュレータはiOSのアイコン挙動を正確には再現しません。PNGが実際にレンダリングされることを確認するには、以下の手順で行います。

MacのSafariで→ファイル→ホーム画面に追加（iPhoneをペアリングしている、または直接デバイスで操作）。
iPhone側：Safariでサイトを開き、共有→ホーム画面に追加をタップし、確定前にアイコンを点検します。
Safariのキャッシュをクリアしたあとに再確認してください—古いアイコンが残っている場合はSafari favicon cache guideの手順に従ってください。

それでもSVGに取り組むべきでしょうか？

はい—iOSのホーム画面以外であれば有効です。SVGはSafariで鮮明なタブ表示、インラインのメディアクエリによる自動的なダークモード切替、ブランドの一貫した情報源を提供します。そしてPNGのapple-touch-iconがiOSが実際に期待するものを提供します。この2つを組み合わせることで、Appleが提供するすべてのサーフェス—タブ、固定タブ、ブックマーク、ホーム画面—で生き残る唯一の方法になります。

フォーマットの対応状況を推測するのはやめましょう。Mzu favicondlはSVGを1つのワークフローでPNGのapple-touch-iconと複数解像度のICOの両方へと変換します。