loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > iPhoneやiPad、Androidにアイコンを表示させるapple-touch-iconを設置してみた
この記事は約2分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2012.3.13

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

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

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

 

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

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」にすれば「光沢処理」はされなくなります。

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

アイコン画像

 

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「MAG(TCD036)」

コメント(1件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ