ガイド

Apple タッチアイコンガイド

誰かがあなたのサイトを iOS ホーム画面に追加すると、Safari は favicon.ico ではなく apple-touch-icon を使用します。 180×180 PNG (または、きれいに縮小された大きな正方形) を発送し、<head> にリンクします。

Apple は、ネイティブアプリの場合とは異なり、Web クリップの最新の iOS にマスキングを適用しません。ただし、アイコンは安全なマージンを備えた正方形である必要があります。ロゴのインセットを最大 10% にして、丸い角がアートワークをクリップしないようにします。

使い方

1
エクスポート 180×180 PNG
ファビコンジェネレーターまたは画像リサイザーから。
2
サイトルートにアップロードする
/apple-touch-icon.png を favicon.ico と並べて保存します。
3
リンクタグを追加する
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> (<head>)。

今すぐ試す

apple-touch-iconのサイズは何ですか?+

現在の iPhone では 180×180 ピクセル。 512×512 または 1024×1024 マスターからエクスポートします。

iOSの場合はPNGまたはICO?+

PNGのみ。 iOS は、ホーム画面アイコンの .ico を無視します。

favicon.icoはまだ必要ですか?+

はい、タブや他のブラウザでは引き続き .ico が使用されます。 Apple-touch-icon は追加的なものです。