Appleタッチアイコン作成

iPhone・iPadがホーム画面ブックマークに使う180×180のapple-touch-icon.pngを、完全なファビコンパッケージと一緒にブラウザ内で生成。アップロードなし。

アイコンを生成する方法

  1. 正方形のPNG・JPG・WebPをドロップまたは選択します。512×512以上が最も鮮明です。
  2. パッケージを生成します。apple-touch-icon.png（180×180）がフルセットと一緒に描画されます。
  3. プレビューで背景色と画像サイズを調整し、ZIPをダウンロードして、HTMLスニペットを<head>に貼り付けます。

これらのアイコンについて

Appleタッチアイコンは、サイトをホーム画面に追加したときにiOSが表示する画像です。Safariは/apple-touch-icon.pngとして配置された180×180のPNGを探します。この1枚で最新のiPhone・iPadをすべてカバーでき、かつての長いレガシーサイズの一覧はもう不要です。

iOSは透過を無視し（黒で塗りつぶし）、角も自動で丸めるため、単色の背景が最適です。プレビューエディターで背景色を設定できます。OptImgはデバイス上でアイコンを描画し、favicon.ico、PNGファビコン、Androidアイコン、Webマニフェスト、HTMLスニペットと一緒にまとめます。何もアップロードされません。

よくある質問

Appleタッチアイコンのサイズは？
180×180ピクセルです。最新のiPhone・iPadのSafariが要求するサイズで、古い57〜152pxの変種はレガシーであり、180×180の1枚でカバーできます。
アイコンを透過にできますか？
おすすめしません。iOSは透過部分を黒で塗りつぶし、角も自動で丸めます。代わりにプレビューエディターで単色の背景を設定してください。
ロゴはサーバーにアップロードされますか？
いいえ。すべてのアイコンはブラウザ内で描画・パッケージ化され、画像がデバイスから出ることはありません。
どんなHTMLが必要ですか？
<link rel="apple-touch-icon" href="/apple-touch-icon.png">タグ1つだけ。パッケージが生成するコピペ用スニペットに、他のアイコンのタグと一緒に含まれています。