手軽屋
ツール一覧

apple-touch-iconの透明問題と背景色——iOSは透明部分を黒で塗る、対策の決定版

「iPhoneでホーム画面追加したらアイコンの背景が真っ黒になった」——これは古くから定番の落とし穴です。原因は、iOSがapple-touch-iconの透明部分を黒で塗りつぶす仕様にあります。Apple Human Interface Guidelinesとapple-touch-icon仕様の歴史を踏まえて、対策を整理します。

apple-touch-iconとは何か

apple-touch-icon.pngは、iOSのSafariで「Webサイトをホーム画面に追加」する時に使われる、ホーム画面アイコン用の画像です。Webアプリ風にショートカットを作成した際、通常のサイト名横にこの画像が表示されます。

iOS Safariは、HTMLの<head>に<link rel="apple-touch-icon" href="/apple-touch-icon.png">と書かれていればそれを読みに行きます。書かれていない場合はhttps://サイト/apple-touch-icon.pngを自動で探しに来ます。

透明部分が黒くなる仕組み

PNG画像は透過情報（アルファチャンネル）を持てる形式で、画像の特定部分を「透明」として保存できます。一般的なブラウザ表示では、背景に重なって自然に見えますが、iOSはapple-touch-iconに対して透明部分を黒で塗りつぶす仕様です。

歴史的経緯としては、iOSの初期（iOS 2系時代）にはapple-touch-iconに自動的に「ハイライト効果」「角丸処理」「光沢効果」が乗っていました。透明部分は黒で塗り、その上にハイライトを乗せるという処理パイプラインだったため、透過PNGをそのまま渡すと黒背景になります。

iOS 7以降、これらの効果は廃止されましたが、透明部分の黒塗り仕様は互換性のため残されています。透過PNGのapple-touch-iconは、現在でも黒背景になります。

対策——背景を不透明色で塗る

解決策はシンプルです。apple-touch-icon.pngの背景を白などの不透明色で塗り、透過部分を作らない。これだけで黒背景問題は完全に防げます。

手軽屋のファビコン作成でも、入力PNGに透過部分があると、その透明領域はiOSで黒塗りになります。事前にカラーピッカーでブランドカラーを選び、透過部分を塗りつぶしてから本ツールに渡すと安心です。

apple-touch-icon-precomposedの歴史

昔のWebサイトには<link rel="apple-touch-icon-precomposed">という記述が残っている場合があります。これは「iOSが施す光沢・角丸・ハイライト効果を無効化する」指示で、iOS 6までは有効でした。iOS 7以降、apple-touch-iconの追加効果が廃止されたため、precomposedの意味は実質なくなりました。

2026年現在、precomposedとapple-touch-iconの動作差はほぼありません。新規サイトではシンプルにrel="apple-touch-icon"だけで十分です。

サイズの選び方

apple-touch-iconの推奨サイズは180×180px（iPhone Plus・Pro Max用のRetina @3xサイズ）です。Apple Human Interface Guidelinesでは複数サイズの提供も推奨されていますが、180pxが1枚あれば、iOSが自動的にリサイズして他のサイズにも対応します。

複数サイズを明示的に指定する場合は、次のようにsizes属性を使います：

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

152pxはiPad Retina用ですが、180pxからリサイズしても見た目はほぼ変わらないため、実用上は180pxの1枚提供で十分です。

ホーム画面追加後の表示確認

作成したapple-touch-iconが正しく表示されるかは、実機で「ホーム画面に追加」して確認するのが確実です。

  1. iPhoneのSafariで対象サイトを開く。
  2. 下の共有ボタン（四角と上向き矢印）をタップ。
  3. 「ホーム画面に追加」を選択。
  4. プレビュー画面でアイコンの背景色を確認。

黒背景になっていたら、apple-touch-icon.pngに透過部分が残っている証拠。手元の画像編集ソフトで背景色を不透明にしてから再アップロードしてください。

ファビコン作成ツール → /favicon/

本記事はApple Human Interface Guidelines、HTML Living Standard rel=icon仕様、MDN <link>要素リファレンスを参照しています。