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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …

no image

無料で高機能なメールフォーム「メールフォームプロCGI」を設置してみた

この記事は約 1 分で読めます。 通常の静的なWebサイトにお問い合せフォームをつける時、自分でCGIを用意しないといけない場合、いろいろ探すのに大変でした。。。 無料でなら尚更・・・で、広告とか入っ …

no image

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき

この記事は約 2 分で読めます。 以前はPCだけを意識してWebサイトを制作してきました。 しかし、最近はだんたんとPC以外(iPhone,iPad,Android)のタブレット系端末のアクセスが増え …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …