iPhoneやiPadの『ホーム画面に追加』で表示されるアイコンを設定してみた。

iPhoneやiPadで閲覧中のサイトをホーム画面に追加した時に表示されるアイコンを制作して設定してみた。

やり方は既にあちらこちらのブログでも紹介されていますが、ここでも一応書いておきます。

114px四方のpng画像を用意してサーバーへアップロードしたら、サイトの＜head＞から＜/head＞の間へ以下のコードを挿入するだけ。Wordpressの場合は header.php へ書き込みます。

iPhoneやiPadで閲覧中の方は『ホーム画面に追加』してみて下さい。

『ホーム画面に追加』をタップ。

文字数の関係でしょうか？なぜか『atelier pian』と『o』が抜けていますので書き加えるなり、別の名前にするなりご自由に。

ね 😉 当工房のお客様ならば、お問い合わせページ（Contact）で『ホーム画面へ追加』しておけば、直ぐにメールを送ることができるので便利ですよ。

参照サイト：
アイコン作成ジェネレーター Mkeappicon
iOSアイコンテンプレート App Icon Template

ついでにパソコンのブラウザでURL欄やブックマーク時に表示されるファビコンも同じデザインのものに変更してみました。

（2013.1.28 追記）
アイコンに光がかかったようなエフェクトをオフにするには以下のように書き換えます。
rel=”apple-touch-icon”　→　rel=”apple-touch-icon-precomposed”