Webの記録

スマホ用にWebクリップアイコンを設置してみた

投稿日:

この記事は約 3 分で読めます。

android_mini

Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。

iPhone、iPad、Androidでホーム画面にショートカット(ブックマーク)した時に、オリジナル画像を表示できます。

スマホ対応しているなら必要・・・ということで、今回設置してみたのでそのメモです。



設置手順

  1. アイコンを用意する
  2. アイコンをアップする
  3. link要素の記述
  4. 実機で確認してみる


アイコンを用意する

アイコンの大きさは、OS側でリサイズされるようです。Retinaを意識すれば2倍サイズ以上ということになるので、最低114px四方の大きさになるようです。

今回は、150px四方とします。カタチは四角でなくてもOKらしいので、私は角丸で簡単に作ってみました。。

画像形式はpngで、ファイル名は自由なようです。

apple-touch-icon用画像

アイコンをアップする

サーバーのルート(index.htmlやindex.phpと同階層)に設置します


link要素の記述

htmlのheadの中に以下のように記述します。1つのページに1つ設定します。複数ページでページごとに違う画像を設定することも可能なようです。

※画像のパスは、Androidの機種によって認識しにくいものがあるらしい(?)ので、フルパスが安全らしいです。。。

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


実機で確認してみる

上記を全てした後で、実機で検証してみました。
まずはAndroid。

Androidのホーム画面

iPhoneの画面

iphone

iPad miniの画面。

iPad miniのホーム画面

Webクリップアイコンを設置している場合は、ちゃんと制作したアイコンが表示されていますが、Webクリップアイコンが無かった場合はファビコンが代用されるようです。
(以下の画像のようにWebクリップアイコンが無い場合、赤いリボンにファビコン画像となります)

icon2icon_1

自分が作ったアイコンが表示されると、ちょっと嬉しいです♪

ホーム画面にショートカットしてくれる程のユーザーがいるのなら、ここまで作っておきたいですね。スマホ対応するのなら、ぜひ!


参考サイト


-Webの記録
-, , , , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 1 分で読めます。 滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。 しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リン …

no image

IllustratorやinDesignで難しい漢字(フォントで使用出来る異字体)を探す方法

この記事は約 2 分で読めます。 今までIllustratorやInDesignを使って難しい漢字(フォントで使用出来る異字体)を入力する時、そのソフトの中ですぐに変換出来る方法が分からず困った事があ …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …