8年弱前

サイトアイコンをスマホのHome画面に表示させる「apple-touch-icon」

ネイティブアプリと同じように、ウェブサイトのアイコンもスマートフォンのホーム画面上に表示させることができます。これによって、登録したサイトをすぐに見ることができるようになります。

この1行を追加するだけ！

本来はアップル製の携帯端末用に作られたものですが、Androidでも正常に動作します。

<link rel="apple-touch-icon" href="icon.png">

上のコードではアイコンが角丸になり、光沢エフェクトがかかります。これをOFFにしたい場合は「apple-touch-icon-precomposed」を使います。

<link rel="apple-touch-icon-precomposed" href="icon.png">

「apple-touch-icon」と「apple-touch-icon-precomposed」を両方指定することもできます。以下のサンプルは「apple-touch-icon-precomposed」に対応していない端末には「apple-touch-icon」を適用させています。

<link rel="apple-touch-icon-precomposed apple-touch-icon" href="icon.png">

AnTytle