ウェブサイトへの「apple-touch-icon.png」の設置 (たつをの ChangeLog)

ウェブサイトへの「apple-touch-icon.png」の設置

2016-10-25-1 [iPhone]

ホーム画面にウェブサイトへのショートカットを置くときのアイコンの設定。
下記を参考に「キンセリ」でやってみた。

apple-touch-icon.png をサイトに設定する意味のまとめ (drk7jp)
http://www.drk7.jp/MT/archives/001831.html

手順：

(1) もともとのロゴ画像を各サイズのPNGに変換。

convert -geometry 120x120 logo-935x935.jpg icon-120x120.png
convert -geometry 152x152 logo-935x935.jpg icon-152x152.png
...

(2) ウェブページに下記を追加。

<link rel="apple-touch-icon-precomposed" href="/kndlsl/img/icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/kndlsl/img/icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/kndlsl/img/icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/kndlsl/img/icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon-precomposed" href="/kndlsl/img/icon-114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="/kndlsl/img/icon-114x114.png" sizes="114x114">

これでOK。

iPhone のショートカットアイコンを見てみると……

出た出た、ちゃんと出た！

以上。