サーバーのアクセスログを調べていて、apple-touch-icon-precomposed.png というファイルに対する数百もの404エラーに首をかしげたことがあるなら、あなたはWeb開発のタイムカプセルを開けてしまったことになります。

Apple Touch Icon Precomposed とは?

このファイルが存在する理由を知るには、iPhoneの初期の時代まで遡る必要があります。iOS 7以前、Appleのデザイン言語はスキューアモーフィズム(現実の質感を模倣するデザイン)が主流でした。ユーザーがWebサイトをホーム画面に保存すると、iOSは自動的にアイコンに「ガラスのような光沢」、角丸、ドロップシャドウを適用していました。

Appleは親切心でやっていたのですが、デザイナーたちの意見は違いました。

光沢ボタン時代の苦肉の策

フラットでミニマルなブランドロゴを何週間もかけて完成させたと想像してください。ユーザーがサイトをピン留めした瞬間、iOSはその上に分厚いゼリーのような光沢エフェクトを被せてしまうのです。StripeやGitHubのようなブランドは、自社のビジュアルアイデンティティが完全に壊されるため、これを非常に嫌いました。

そこでAppleは回避策として「precomposed」タグを導入しました。ファイル名を apple-touch-icon-precomposed.png にするか、対応するHTMLリンクを使用することで、「私のアイコンには触らないでください。すでにデザイン済みです」とiOSに明示的に伝えることができたのです。

Precomposedタグの仕組み

実装は非常にシンプルでした。ドキュメントのheadに特定のlinkタグを追加するだけです。

<!-- 従来の precomposed メソッド -->
<link rel='apple-touch-icon-precomposed' href='/apple-touch-icon-precomposed.png'>

古いiOSデバイスがサイトを保存する際、まずprecomposedバージョンをリクエストします。それが見つかれば、アイコンはデザイン通りのまま表示されました。標準の apple-touch-icon.png しか見つからなかった場合は、光沢フィルターが適用されました。

2026年にこれを削除すべき理由

私の明確な意見を言います。今日すぐに、コードベースからprecomposedアイコンへの参照をすべて完全に削除すべきです。Appleは10年以上前のiOS 7で光沢エフェクトを廃止しました。最新のiOSデバイスがアイコンの内部スタイルを勝手に変更することはもうありません(角丸の強制は現在も続いていますが)。

2026年の正しいセットアップは以下のようになります:

<!-- 最新の正しいメソッド -->
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

過去の遺物を引きずることなく、現在のiOS要件を満たすクリーンでモダンなアイコンを生成したい場合は、Mzu favicondl を使用してください。現代のWebに本当に必要なものだけを出力します。現在のiOS要件についてさらに詳しく知りたい場合は、Apple Touch Icon セットアップガイドをお読みください。

2012年のコードを持ち歩くのはもうやめましょう。headタグを整理し、precomposedの接尾辞を捨てて、すっきりとしたサーバーログを手に入れてください。