iPhoneのMobile Safariには「ホーム画面に追加」という項目があります。
これはiPhoneのホーム画面にWebサイトをブックマークする機能で、「Webクリップ」と呼ばれています。
普通であれば、Webサイトのスクリーンショットが表示されるんですが、アイコンの画像ファイルを設定することによって、そのアイコンが表示されるようになります。
1．ホーム画面用のアイコンをつくる。
アイコンの画像は縦114px×横114px以上のpng形式で、今回はicon.pngという名前で作成しました。
このアイコンにはiPhoneが自動的に角丸と光沢を付けてくれるので、あらかじめ画像データに角丸と光沢を付けておく必要はありません。
2．<head>内に下記を追加する。
＜光沢あり＞
<link rel="apple-touch-icon" href="img/icon.png" />
＜光沢なし＞
<link rel="apple-touch-icon-precomposed" href="img/icon.png" />
アイコンに光沢を付けるか付けないかを決めることができます。でも、角丸は必ず付けられてしまうので変更ができません。また、透明色は黒くなってしまうので使うことができません。
下の画像の左のアイコンが光沢ありで、右のアイコンが光沢なしです。
このようにiPhoneのホーム画面にWebサイトをブックマークするとアイコンが表示されるようにできます。
leave a comment