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

2013/06/12 2015/07/01

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

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

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

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


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

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

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

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

: WordPress プラグイン「WordPress Popular Posts」を導入。

よく他ブログサイトで「人気の記事」など記事のアクセスランキングを見ます。その「人 …

: 次期 iPhone は、早く、そして長く使えることになるかも。

次期iPhoneに搭載されるであろうチップが、これまでよりも早く、そして長くiP …

: WordPress プラグイン「WPtouch」の「メニュー」レイアウト崩れ修正方法

WordPressのサイトを、スマホ用に自動でレイアウトを変換してくれる、代表的 …

: iOS 8.1がダウンロード可能に！カメラロールはあると便利だ。

本日よりiOS 8のメジャーアップデート版、iOS 8.1がダウンロード可能とな …

: SEO対策含め、パーマリンクの設定を変更しました。（その２：変更理由）

パーマリンクの設定変更の続きとして、なぜこのパーマリンクに設定したのか。を纏めて …

: 次期iPhoneのストレージは32GBが復活し、16GBはなくなるかも

なぜ16GBが残って32GBがなくなったのかユーザーとしては不思議でしたが、次期 …

: Twenty Thirteen へ。WordPressテーマのアップデートが初めての人へ

これまでWordPressのテーマは「Twenty Twelve 」を使用して、 …

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

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