ウェブクリップでウェブサイトのスマホ対策！ファビコンの次にすること

ウェブサイトにファビコン(favicon.ico)を付けることは知られた内容ですが、ファビコンを設定していてもiPhoneでは「お気に入り」にアイコン表示がされません。

また「ホーム画面に追加」をする際にもアイコン表示はされず、ウェブ画面を縮小した画像が設定されます。Androidではショートカットと呼ばれます。

これでは見栄えが良いとは言えません。

画像を用意

iPhoneなどのスマホ向けに画像を設定するためにはウェブクリップを設定します。
まず画像サイズは144x144ピクセルでPNG形式で用意します。ファイル名は「apple-touch-icon.png」とします。

アップロード

これを自分のサイトにアップロードします。Rootに上げればこれだけでiPhone対応は完了です。

ヘッダーに指定

Androidに対応するためには自分のサイトの<head> ~ <head>の中に以下を記載します。
"xxx"は自分のサイトのURLに置き換えます。
また、この指定をする場合はPNGのファイル名は任意のものに変えることが出来ます。

Bloggerでは

自分が使用しているBloggerではrootに置く事が出来ません。
記事の投稿画面で画像を一度登録して、その記事のHTMLの編集画面でURLを確認します。

ここでのURLは
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0k_I4ibT7HgDDhan3acvwqBPG8jr-URIcDZs7IuVzIm3viBhR_Ewx1lsBAvhM7g_Zs3ff76dQyTsNgH0wTfhCuOFUn78fyJ-vmM3e9sDOgqe99ep4UJIBKWgPWW2yMmt6GDmxKvbfibE/s1600/apple-touch-icon.png"
という長いものになります。

従って<head>のすぐ下に下記を記載しました。

これでホーム画面に自分のアイコンが表示されるようになります。

また、お気に入りの画面でも同様にアイコンで表示されています。

以上で完了です！

2014/06/30