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

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …

『WordPress閲覧しているページが使用しているテンプレートがひと目でわかる!』便利プラグイン「Show Current Template」

この記事は約 1 分で読めます。 WordPressのテンプレートを制作・カスタマイズをしていて、「表示しているページがどのテンプレートを読んでるんだろう」と思ったことはないですか? 「Show Cu …