HOME > ウェブデザイン > iPhoneやiPad、Androidにアイコンを表示させるapple-touch-iconを設置してみた
記事公開日:2012.3.13
この記事は約2分で読めます。
当ページのリンクにはプロモーションが含まれています。

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

この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。

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

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

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

スポンサーリンク

スポンサーリンク

apple-touch-icon

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

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

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

ファビコン用画像

上は以前にも使っていたファビコン用画像でサイズのみ若干手直ししたものです。

細かく指定して数個の画像を用意する方法もありましたが、私は面倒くさかったので256×256pxの画像のみを用意して制作することにしました。

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

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

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

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

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

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

アイコン画像

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

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

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

 

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

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

アイコン画像

以上です。

ワードプレス有料テーマの探し方画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

1件のコメント

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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