iPhoneアプリのアイコンを実機でザックリ確認する手順

アプリアイコンのデザイン過程で多数の案を比較したかったので、ザックリと見れるものを量産した手法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>アプリ名</title>
  <link rel="apple-touch-icon-precomposed" href="icon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.6667, maximum-scale=1, user-scalable=no"/>
</head>
<body>
<p>このページをホーム画面に追加</p>
</body>
</html>
  • アイコン画像は256×256のpng画像を用意し、仮にicon.pngとする
  • 上記HTMLファイルを作成しiPhoneで開ける環境に設置する(XAMPPのhtdocs下が一番楽)
  • 実機で開き「ホーム画面に追加」

あとはアイコン画像名とHTMLファイル名を変えて量産すればアイコン比較できます。