透過背景の完璧なPNGをApple Touch Icon用にアップロードしたのに、デスクトップでは綺麗に見えるのに、iPhoneのSafariでロゴの周りに白い四角が表示されてしまう。まるで白い紙にシールを貼ったみたいに。私も経験があります。正しく設定したはずなのに、なぜ？というフラストレーション、よくわかります。修正方法は思ったより簡単で、アイコンをデザインし直す必要はありません。

クイックフィックス：正しいHTMLタグを追加する

apple touch icon transparent backgroundが白い四角で表示される最も一般的な原因は、iOS Safariがデフォルトのアイコンにフォールバックしていることです。おそらくrel='apple-touch-icon'タグが不足しているか、間違ったサイズを使用しています。必要なHTMLはこれだけです：

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

たった1行です。sizes='180x180'属性がiOSにこの特定のファイルを使用するよう指示します。これがないと、Safariがアイコンを無視して白いプレースホルダーを表示する可能性があります。

なぜ180x180なのか？

Appleは最新のiPhone（iPhone 6s以降）に180x180ピクセルを推奨しています。古いデバイスでも問題なくフォールバックします。複数のサイズを生成する場合は、Apple Touch Icon Sizes Guideをご覧ください。しかし、正直なところ180x180でほぼすべてをカバーできます。

根本原因：なぜ透過が壊れるのか

正しいHTMLを設定しても、白い背景が表示されることがあります。本当の原因は次の3つです：

PNGの透過性を確認する方法

ブラウザでアイコンを開いてください。チェッカーボードパターンが表示されれば、透過性は問題ありません。白やグレーのベタ塗り背景が表示される場合、PNGに問題があります。デザインツールから「透明度」にチェックを入れて再エクスポートしてください。

予防のヒント：白い四角を永久に防ぐ

一度修正したら、再発させたくないですよね。私が実践している方法をご紹介します：

Apple Touch IconにSVGを使う（はい、動作します）

iOS 14以降はApple Touch IconにSVGをサポートしています。SVGは透過性をネイティブに処理するため、白い四角やアルファチャンネルの問題は発生しません。タグは次の通りです：

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

私は6ヶ月前に自分のサイトでSVGに切り替えましたが、問題はゼロです。唯一の注意点は、古いiOSバージョン（iOS 13以下）はSVGを無視することです。PNGのフォールバックを用意しておきましょう。

キャッシュバスティング：ファイル名を変更する

アイコンを更新するたびに、ファイル名を変更してください。apple-touch-icon.pngの代わりにapple-touch-icon-v2.pngを使用します。これにより、iOSはキャッシュされた白い背景のバージョンではなく、新しいファイルをダウンロードするようになります。

実機でテストする

シミュレーターを信用しないでください。サイトをiPhoneのホーム画面に追加して、アイコンを確認してください。白い四角が表示されれば、すぐにわかります。完全なチェックリストについては、Apple Touch Icon Complete Setup Guideをご覧ください。

'precomposed'属性はどうする？

古いチュートリアルではrel='apple-touch-icon-precomposed'を推奨しているものがあります。これはiOS 6以前のもので、アイコンに光沢効果を追加するためのものでした。現代のiOSはこれを無視します。使用しないでください。単なる無駄です。白い四角の問題は、ほとんどの場合、タグの欠落、古いアイコンのキャッシュ、または透過性のないPNGが原因です。これら3つを修正すれば、アイコンはすべてのiPhoneでネイティブに見えるようになります。