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

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

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

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

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …