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 2つのプラグイン追加とPingサーバー設定

当ブログは、WordPressで構築されていますが、下記プラグインや設定を追加し …

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

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

: WordPressのプラグイン「PS Auto Sitemap」でサイトマップページを簡単作成

先日プラグイン導入の概要を記事として載せましたが、PS Auto Sitemap …

: WordPressを自分色に変えたい！ステップアップブックで勉強中です。

WordPressでさぺログを運用していますが、もう少し自分色を出したいと思い、 …

: Apple公式サイトにてSIMフリーiPhone6 / 6 Plusの販売が再開されました。

Apple公式サイトにて、なんの前触れもなく突然販売が中止になっていたSIMフリ …

: iPhone 写真データの一括(まとめて)削除の方法 (Mac版)

生活の必需品となっているiPhone。気がつくと容量がギリギリになっていること …

: 次期iPhone 初回生産台数が過去最大の9000万台を発注

次期iPhoneの話題がネット上にも増えてきました。iPhone好きには、ある意 …