Tech

apple-touch-iconの推奨サイズが180pxとか最初に言い出したのは

公開

誰なのかしら〜と思った メモリアル 記事です。

サイトをブックマークしてホーム画面に表示するため用意する apple-touch-icon の適切なサイズについて、AIに聞いたらおぼろげながら浮かんできたんです180(px)という数字が……というだけでは若干不安だったので、改めてこの数字の根拠を調べ直してみたところ、なんと10年近く前のAppleのガイド記事を信じて皆やってきてしまっていることがわかりました。や、ヤバくね……?

スクリーンショット 2026-09-30 16.10.59.png

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">

こちらにある通り、iPhone 6 Plus(iOS12)の時代のRetina対応として推奨されているサイズが180px (60pxの3倍解像度)です。ちなみに最新iOSは(18から飛んだとはいえ)27ですが……。

なお、web界隈においてこれ以降Appleが公式見解として出しているものはありません。
そもそもAppleのサイトにもapple-touch-icon は実装されていませんし……。

またこちらの「180px」という値を盲信し続けた弊害(実害)として、iOS26〜(?)のSafariではこの通りに設定されたサイトをホーム画面に追加しようと開いた 「共有」メニューの左上、サイトアイコン周りに(アイコンのサイズが小さいために?)白枠が出てしまいます 。

ホーム画面に追加した際のアイコン自体は180pxのままで現状は問題ないのですが、アプリ用のアイコンとしては余白も加味しているはずなので背景が白くない(透過されていない)アイコンになりがちなことを考えると……若干ダサくみえてしまうかも?

なおこの現象は 256px辺りの少し大きいサイズにするだけで治ります 。もうやだこの林檎。

※ちなみにこちら本当に大きくするだけでいいのか?とも思ったのですが、Claudeに探してもらった直近のIssue(26/09/25)に似たような報告がありました。こちらの方は540px(180×3)として解決しているので、実態としては「180px」という値自体が本当に古くなりつつあるようです。

https://github.com/thenickberry/plop/pull/6

ネイティブアプリのアイコン画像に関してはもう「1024px」1枚で済ませているようですし、それなら別に apple-touch-icon としても半分程度の512pxもあれば十分なのかもしれません。

https://developer.apple.com/jp/design/human-interface-guidelines/app-icons

WebであれAIであれ、実機での確認に勝るものはなにもないですね……。