さぺログ

インターネットで話題のモノ、コト、イベント、役立つ情報や商品レビューを発信中

iPhoneのホーム画面に表示するアイコン画像を設定

      2015/07/01

iPhoneなどスマートフォンで、お気に入り登録したサイトをホーム画面にアイコンで表示する事ができます。アイコンは、ファビコンと同じように、設定しないと表示されないので、そのアイコン画像を設定する方法をまとめてみました。

アイコン画像とはどういうモノかというのは、文字で説明するよりは、実際のホーム画面を見て頂いた方が分かりやすいと思います。

ホーム画面のアイコン画像と設定方法

photo

コレです。こちらもプラグインとかではなく、header.phpの<head> 〜 </head>の中に下記1文をセットするだけでできます。


<link rel="apple-touch-icon" href="画像パス" />
</head>

画像の大きさは、PNG形式:57×57px(正方形であれば、これ以上でもOK)。上記内容だと、光沢あるアイコンになるので、そのままアイコンを表示させたい場合は、

<link rel="apple-touch-icon-precomposed" href="画像パス" />
</head>

となります。また、iPhoneのSafariのキャッシュをクリアしないと、表示がうまくいかないのでご注意ください。

 - iPhone, WordPress , ,

 

スポンサードリンク

 

スポンサードリンク

  関連記事

wordpress-logo
さらに追加した自作テーマを補うプラグイン2つを紹介します。

前回紹介した自作テーマを補うプラグインをさらに2つ追加しましたので、紹介したと思 …

no image
JUGEMブログは、Google AdSenseが無効になる。

ブログをWordPressへ引っ越ししましたが、大きな理由としては、 「JUGE …

iPhone 6 / iPhone 6 Plus は過去最高の予約数!予約開始24時間で400万台を突破

Appleがまたすごい記録を出しました。iPhone6 / iPhone 6 P …

この3つのコンセプト動画を見ると次期iPhoneが待ち遠しくなる

iPhoneの次期バージョンのコンセプト動画を最近よく目にするようになったので、 …

no image
twitterと連携、その他ソーシャル系サービスのボタンを追加してアクセスアップ!

さぺログを初めて、1ヶ月が経とうとしています。ついにサイドバーの「アーカイブ」に …

WordPress 自作テーマを補うプラグイン3つを紹介します。

さぺログ自作テーマを適用しましたが、テーマ内だけでは対応できなかった機能などはプ …

iPhone 保護フィルムが良かったので、Nexus7 にも貼りました。

これまで、気泡やホコリが逆に目立つから買うのをためらっていた保護フィルムを試しに …

iPhoneの一生を描いたショートフィルム「THE LIFE & DEATH OF AN IPHONE」がウルッとくる

あるiPhoneの長いようで短い人生を描いたショートフィルムです。

stinger3へ移行する際に注意した3つのこと

WordPressのテーマをstinger3へ変更するにあたり、注意した点が3つ …

新型iPhoneが9月9日に発表か!?

本日、いっせいにIT系メディアを含めYahoo!トップ画面のニュースにも表示され …