iOSホーム画面用アイコン
180×180 Apple Touch Icon作成
背景と余白を整えた180×180 PNGを1枚で。
ロゴを選び、余白と単色背景を調整して、書き出される画像とiPhoneホーム画面のプレビューを比較できます。角丸は端末側で適用されるため、ダウンロードする画像は正方形です。
Apple Touch Iconに使うロゴを選択
スマートフォンのホーム画面で認識し続けるために、十分なコントラストを備えたシンプルなマークを使用します。
PNG・JPG・WEBP・SVG・最大10MB
Apple Touch アイコンを作成する方法
- 01
正方形のロゴまたはアイコンを選ぶ
できるだけ正方形のロゴシンボルを使ってください。横長のワードマークは中央に収めると小さくなり、ホーム画面で判別しにくくなります。
- 02
Apple Touch アイコンのパディングと背景を調整する
ブランドに合う単色背景を選びます。元画像には角丸を付けず、iOSの角丸表示で端が切れないよう十分な余白を残してください。
- 03
180×180のPNGをダウンロード
apple-touch-icon.pngをサイトの公開ディレクトリへ保存し、生成されたlinkタグをページのheadへ追加します。
Apple Touch アイコンのサイズ、形式、ファイル名
このツールは、訪問者がサイトをiPhoneやiPadのホーム画面へ追加したときにSafariが使うアイコンを作成します。
寸法
180×180ピクセル
高解像度iPhone向けのWebクリップサイズです。Safariは指定された候補から端末に合うアイコンを選びます。
ファイル
apple-touch-icon.png
サイトのルートに置く形式として広く使われている、分かりやすいファイル名です。
レンダリング
四角くて不透明
選択した色がすべてのピクセルを塗りつぶします。角の丸みと最終的なプレゼンテーションは iOS によって適用されます。
Web サイトに Apple Touch アイコンを追加する方法
リンク要素で使用されている URL に PNG を配置し、両方の変更を一緒に展開し、サイトをホーム画面に追加する前に公開ファイルを直接テストします。
Apple の Web Clip アイコンのドキュメントを読むapple-touch-icon をプレーン HTML に追加する
apple-touch-icon.png をパブリック ルートに配置し、リンク要素を各ページ テンプレートの先頭に貼り付けます。
Next.js で Apple Touch アイコンを設定する
publicディレクトリへ配置するか、フレームワークのMetadata規約を使います。古い画像が優先されないよう、既存のアイコン指定も確認してください。
WordPress サイトアイコンを使用する
WordPress は、サイトアイコンからプラットフォーム資産を派生できます。このファイルを手動でインストールする場合は、テーマまたは最適化プラグインが別のタッチ アイコンを出力しないことを確認してください。
Apple Touch アイコンに関するよくある質問
Apple Touch アイコンとは何ですか?
これは、誰かが Web サイトを iPhone または iPad のホーム画面に追加するときに、Safari が Web サイトを表すために使用する画像です。これは、ブラウザーのタブで使用される小さなファビコンとは別のものです。
このツールはなぜ 180×180 をエクスポートするのですか?
Appleが高解像度iPhone向けのWebクリップアイコンとして案内しているサイズだからです。端末別に複数サイズを指定することもできますが、1ファイルで用意するなら鮮明な180×180 PNGが実用的です。
自分で角を丸くしたほうがいいでしょうか？
いいえ。書き出す画像は正方形のままにしてください。角丸はiOS側で適用されるため、画像にも角丸を付けると二重の縁や不要な隙間が生じることがあります。
アイコンに透明度を持たせることはできますか?
このジェネレーターは、選択した単色の上にアートワークを合成することで、意図的に透明度を削除します。これにより、結果が予測可能になり、透明な領域が意図しない背景になるのを回避できます。
古いアイコンがまだ表示されているのはなぜですか?
まず、展開された PNG URL を開いて、新しいファイルが提供されることを確認します。次に、重複したリンク要素、サイトまたは CDN キャッシュ、および削除して再度追加する必要がある可能性のある既存のホーム画面ブックマークを確認します。