iPhoneやiPad、Androidにアイコンを表示させるapple-touch-iconを設置してみた

RSSで購読しているとあるサイトのソースを何気に覗いていたら「apple-touch-icon」という見慣れぬ文字があるじゃないですか。

調べてみるとiPhoneやiPadの「ホーム画面に追加」で表示されるアイコンのことらしい。

うーん、せっかくだから当ブログにも設置してみましょか。

apple-touch-icon

用意するのは「apple-touch-icon.png」というファイル名の画像です。

iPhoneの方で自動でリサイズしてくれるようなのでベースとして以下の画像を用意してみました。

（実際に使用したのは256×256pxの画像です）

結果としてはiPadでもiPhone（iPod）でもAndroidでも問題なく表示されました。

iOS系は光沢処理まで自動でかかっています。

（Androidの場合はアイコン表示までがちょっと面倒ですがここでの詳細説明は割愛します）

予想していたほど画質が落ちているというふうでもないし。

え、もしかしてこれで終了ですか？

私にしては珍しく、こんなに 1発でうまくいったのは久しぶり～！

もしも上記アイコンの「光沢処理」が嫌だ！という人は「rel」属性の値を「apple-touch-icon-precomposed」にすれば「光沢処理」はされなくなります。

上記のように設定したところ、見事光沢処理がかかってないアイコンが表示されました。

以上です。