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

Total 787 views
この記事の所要時間は約 2分です。

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

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

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

スポンサーリンク


 

ウェブで検索すると出るわ出るわ。

詳しいことはそっちにお任せするとして当ブログでは実践記を掲載しておきます。

 

イメージ画像

 

apple-touch-icon

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

iPhoneの方で自動でリサイズしてくれるようなので
ベースとして以下の画像を用意してみました。
(実際に使用したのは 256×256pxの画像です)

ファビコン用画像

上は以前にも使っていたファビコン用画像でサイズのみ若干手直ししたものです。
細かく指定して数個の画像を用意する方法も述べられていたんですが私は面倒くさかったので 256×256pxの画像のみを用意して制作することにしました。

デザイン力があればもっといいのをお見せできるんですが、結果はサイト名を文字にしただけの画像で終わってしまった駄作 w。

画像のサイズは 57×57pxや 114×114px がいいとか設置場所はサーバーのルートに置くべしとかあったんですが、私の場合は上記画像を PNGで書き出してサイズを減らしただけです。

画像の設置場所もルート上だと管理が面倒くさいのでいつものごとくイメージフォルダの中に置いて絶対パスで指定してみました。

結果としては iPadでも iPhone(iPod)でも Androidでも問題なく表示されました。
iOS系は光沢処理まで自動でかかっています。
(Androidの場合はアイコン表示までがちょっと面倒ですがここでの詳細説明は割愛します)

アイコン画像

 

予想していたほど画質が落ちているというふうでもないし。
え、もしかしてこれで終了ですか?

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

 

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

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

アイコン画像

 

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

1件のトラックバック

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)