このツールについて
Apple Touch Icon は、ウェブサイトを Apple 製品のホーム画面に追加するときに使うアイコンです。単色の正方形の背景にロゴを配置し、よく使われるサイズの PNG と対応する HTML を用意できます。
使い方
- PNG、JPG/JPEG、静止画の WebP を選択するか、ドラッグして追加します。
- 白または好みの単色を背景に選び、画像の収め方、中央の切り抜き、余白を調整します。
- 初期設定の 180×180 を使うか、必要なサイズを追加して生成します。
- PNG または ZIP をダウンロードし、HTML をコピーして、ファイルの参照先を確認します。
対応サイズ
- 初期設定では、多くのサイトで使いやすい 180×180 の apple-touch-icon.png を生成します。
- 必要に応じて 120×120、152×152、167×167 も選べます。端末や既存のアイコン設定に合わせたい場合にご利用ください。
アイコン作成のヒント
- 「全体を収める」は縦横比を保って画像全体を表示し、余った部分を選択した背景で埋めます。「中央を切り抜く」は中央の正方形を切り出します。どちらも画像を引き伸ばしません。
- 余白は出力サイズの各辺に対する割合です。10% の余白では、中央の画像部分の幅と高さがそれぞれ約 80% になります。
- 16×16 などの小さいサイズには、輪郭が単純でコントラストのはっきりした絵柄が適しています。複雑な写真や小さい文字は見分けにくくなるため、実寸プレビューをご確認ください。
PNG、JPG/JPEG、静止画の WebP に対応。1 ファイル 100 MiB まで、画像は 4,000 万ピクセルまで、1 辺 16,384 ピクセルまでです。大きな画像は処理時間とメモリを多く必要とする場合があります。
Apple Touch Icon の使い方
- 初期設定は白い背景と各辺 10% の余白です。透明なロゴは選択した背景色の上に配置され、表示環境による想定外の背景色を避けられます。
- 四隅を切り取らず、正方形のまま出力します。ホーム画面での角の丸みや見た目は端末が決めるため、適度に余白を取ると絵柄を端から離せます。
- 生成する HTML は apple-touch-icon を使い、実際に作成したサイズだけを参照します。ファイルを参照先と同じ場所に配置してください。
プライバシー
画像、絵文字、生成したアイコンはお使いのブラウザ内だけで処理され、サーバーには送信されません。
入力内容や結果は自動保存されません。クリアしたりページを離れたりする前に必要なアイコンをダウンロードし、元の素材も保管してください。
よくある質問
Apple Touch Icon とは何ですか？
サイトを Apple 製品のホーム画面に追加するときの PNG アイコンです。通常はページ内の apple-touch-icon で指定します。
どのサイズを選べばよいですか？
一般的なサイトでは、まず初期設定の 180×180 を使えます。既存の設定や別の端末のサイズに合わせる場合は、ほかのサイズも選んでください。
透明でない背景を使うのはなぜですか？
ロゴの周囲の色を固定できるためです。透明部分に、表示環境によって意図しない背景色が付くのを防げます。
先に角を丸くする必要はありますか？
通常、事前に角を丸くする必要はありません。このツールは標準の正方形 PNG を出力し、端末がアイコンの見た目を適用します。
ダウンロードしたアイコンを使うには？
結果欄の HTML をコピーし、対応するパスにアイコンを配置してください。180×180 のファイル名は apple-touch-icon.png で、ほかのサイズにはそれぞれの生成名を使います。