iPhoneでSafariからWebサイトをホーム画面に追加したとき、アイコンがブランドロゴになっているサイトと、ただのスクリーンショットになっているサイトがあるのを見たことはありませんか？その違いは「Apple Touch Icon」の有無です。新しいプロジェクトを始めるなら、ぜひ優れたサイトからインスピレーションを得たいですよね。

しかし、このアイコンファイルを見つけるのは、通常のfavicon（/favicon.ico）のように単純ではありません。Apple Touch Iconは<link>タグやmanifest.jsonに隠れていることが多いのです。ここでは、URLを推測せずに任意のWebサイトからApple Touch Iconを抽出する方法を解説します。

なぜApple Touch Iconは見つけにくいのか

多くの開発者は標準的なfaviconのURLパターンを知っています。しかしAppleは、独自のルールを設けています。アイコンはapple-touch-icon.png、apple-touch-icon-precomposed.png、またはWebアプリマニフェスト内に配置される可能性があり、統一された命名規則はありません。

例えばGitHub。彼らのApple Touch Iconはルートディレクトリにはありません。https://github.githubassets.com/assets/apple-touch-icon-... というハッシュを含むファイル名で配信されています。/apple-touch-icon.png と推測してアクセスすると、404エラーになります。

Apple Touch Iconが潜む3つの場所

調査を始める前に、どこを探せばよいかを知っておきましょう：

方法1: ブラウザのDevToolsで抽出する（手動）

これは素早く確認するための最速の方法です。任意のWebサイトを開き、右クリックして「検証」を選択（またはF12キーを押下）します。「Elements」タブに移動し、Ctrl+F（Macの場合はCmd+F）で「apple-touch-icon」を検索します。

以下のようなコードが見つかります：

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

hrefの値をコピーします。相対パス（例：/path/to/icon-180.png）の場合は、サイトのドメインを先頭に追加します。そのURLを新しいタブで開けば、アイコンが表示されます。

linkタグが見つからない場合は？

一部のサイト、特にモダンなPWAでは、HTMLタグを完全にスキップしてマニフェストに依存しています。その場合は、以下を探します：

<link rel='manifest' href='/manifest.json'>

そのJSONファイルを開き、sizes: '180x180' または sizes: '192x192' のオブジェクトを検索します。それがApple Touch Iconです。

方法2: Mzu favicondlを使う（スマートな方法）

競合サイトの監査やデザインの参考収集など、定期的にアイコンを抽出する必要がある場合、手動の方法はすぐに面倒になります。そこで役立つのがMzu favicondlです。

ツールにWebサイトのURLを貼り付けるだけで、HTMLのlinkタグ、manifest.json、ルートディレクトリの3箇所を自動的にスキャンします。すべてのApple Touch Iconサイズを検出し、ダウンロード可能なファイルとして表示します。DevToolsを探し回ったりパスを推測したりする必要はもうありません。

これは特にApple.comのようなサイトで便利です。Apple.comは複数のサイズ（152x152、167x167、180x180）を異なるパスから配信しています。Mzu favicondlはそれらを一度に取得します。

プロのヒント: Precomposedバリアントも確認する

古いiOSバージョン（iOS 7以前）では、光沢のあるオーバーレイを除去したapple-touch-icon-precomposedが使用されていました。モダンなiOSはこの属性を無視しますが、一部のレガシーサイトでは今でも提供されています。古いサイトからアイコンを抽出する場合は、両方のrel値を確認してください。Mzu favicondlはこれを自動的に処理しますが、手動で行う場合はprecomposedタグを見逃さないでください。

方法3: コンソールのワンライナー

ターミナル操作に慣れている方向けに、DevToolsのコンソールで実行できるクイックJavaScriptスニペットを紹介します：

const links = document.querySelectorAll('link[rel*="apple-touch-icon"]);
links.forEach(link => console.log(link.href));

これにより、ページ上のすべてのApple Touch IconのURLがログに出力されます。何も表示されない場合、サイトはマニフェストを使用している可能性があります。代わりに以下を実行します：

fetch('/manifest.json')
  .then(r => r.json())
  .then(m => m.icons.filter(i => i.sizes.includes('180'))
  .forEach(i => console.log(i.src)));

これによりマニフェストを取得し、標準的なApple Touchサイズである180x180のアイコンをフィルタリングします。

抽出したアイコンをどう活用するか

アイコンファイルを入手したら、自身のデザインの参考にできます。ただし、単にコピーするのではなく、分析しましょう。大手ブランドがどのように180x180ピクセルという小さなサイズでロゴを単一の認識可能な形状に簡略化しているかに注目してください。Appleはシルエットを、Googleは「G」マークを、Stripeは「S」を使用しています。

自身のApple Touch Iconを設定する場合は、Apple Touch Icon: 完全セットアップガイドで必要なHTMLとサイズを確認してください。また、iOSでアイコンが表示されないトラブルシューティングについては、Faviconが表示されない？7つの一般的な原因と修正方法でよくある落とし穴を解説しています。

まとめ

WebサイトからApple Touch Iconを抽出するのは、どこを探せばよいかを知っていれば難しくありません。DevToolsでlinkタグにすぐアクセスでき、マニフェストがフォールバックを提供します。そして、頻繁に抽出する必要があるなら、Mzu favicondlが反復作業を省いてくれます。

次にiPhoneのホーム画面で鮮明なアイコンを見かけたら、それを取得する方法と、自分のサイトでも同様に優れたアイコンを構築する方法が正確にわかるでしょう。