Web アプリケーションを iPhone/iPad などの iOS や Android のホーム画面に追加する時(Web クリップ)のアイコンの指定方法

Web アプリケーションを iPhone/iPad などの iOS や Android のホーム画面に追加する時(Web クリップ)のアイコンの指定方法のメモ。

基本は link タグの rel 属性に apple-touch-icon を指定し、href 属性にアイコン画像を指定するというもの。画像は PNG で。

[code lang=’html’] [/code]

そして、解像度が違うデバイスに対して同じアイコンを使いたくない、と言う場合には、次の様に sizes 属性をデバイス分だけ指定します。

[code lang=’html’] [/code]

sizes を指定しない場合は、57×57 を指定したのと同じ状態です。
また、指定した sizes よりも元画像が大きい場合、自動的にリサイズされて利用されます。

これらの指定方法では、自動的に「角丸処理」と「グラス効果」が付加されます。

もし作成したアイコンを何の処理もせず使わせたい場合であれば、「apple-touch-icon〜」の部分を「apple-touch-icon-〜-precomposed」に変更すれば OK です。

*

Android も同じタグでアイコンを読み込む様です。

「デスクトップ長押し|ショートカット|ブックマーク」で追加します。
ただし、予めブラウザでブックマークを登録しておく必要があります。

*

参考:
iOS Developer Library

10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント

【最後まで読んでくれたあなたに】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

・ワードプレスを使いこなせるコツを知りたい!
・自分にピッタリのサーバーを撰びたい!
・無料ブログとの違いを知りたい!
・あとで悔しくならない初期設定をしておきたい!
・プラグイン選びの方法を知っておきたい!
・SEO対策をワードプレスで行うポイントを知りたい!
・自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

※登録後に表示される利用条件に沿ってご利用ください

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です