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

WordPress 管理画面でメモが自由に書けるプラグイン「Plugin Memorandum」

この記事は約 1 分で読めます。 WordPressには便利なプラグインがたくさんあって、いろいろ試していたら・・・気がつくと大量のプラグインで画面がいっぱい!!「コレ何だったっけ?」というプラグイン …

no image

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

この記事は約 1 分で読めます。 レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。 最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認 …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

WordPress 「IE6 No More」プラグインでアラートを表示させてみた。

この記事は約 1 分で読めます。 IE6ブラウザで見た時だけ、バージョンアップを案内する表示をさせたいと思います。 幾つかWordpressのプラグインで見つけたのですが、表示が上手くいかないものもあ …