2014.6.07 (Sat)

スマホ版ファビコン!ウェブクリップアイコンの設定方法

スマホ版ファビコン!ウェブクリップアイコンの設定方法

最近更新ペースが落ちてきてすみません。実はこのサイトの以前から直したかった部分をちょくちょく修正しているのです。

と言ってもHTMLのコードを微妙に改善したりの地味な部分ですので、今のとこ目立つ変化は殆どないと思います。ver 1.0.1的なアップグレードです。

それで、その作業の中でスマホ用のファビコン「ウェブクリップアイコン」も修正したので、今回はその設定方法を書いていきたいと思います。

ファビコンって?

Favorite iconでFavicon

「お気に入り」登録したときなどに表示されるアイコンのことです。

favicon_01

PCサイトで言うとこういう所に表示されてるやつです。
<link rel="shortcut icon" href="画像へのパス" />

とHTMLのhead内に記述すれば設定できます。

スマホ版ファビコン ウェブクリップアイコン

PC用にファビコンは設定していても、モバイル用のファビコン ウェブクリップアイコンは設定されていないサイトをまだ見かけます。

僕も含め、スマホでWEBブラウジングする人の割合が増えている昨今、こちらも設定しておきたいところです。

favicon_02

こんな風にお気に入り登録やホーム画面に追加した時に表示されます

こちらの設定方法も簡単。

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

と、HTMLのhead内に書くだけ。

ファイル形式はPNG、サイズは152 × 152pxが良いみたいです(今のとこ最新であるiOS7のiPadに対応する為)。

また、記述は”apple-touch-icon”だけでも良いのですが、これだとiOS7より以前のOSでは光沢効果がかかってしまうので、念のため”precomposed”を付けた記述にしています。フラットデザインならばこちらにしておいたほうが良いでしょう。

ちなみに…

favicon_03

今回修正したのは背景の色。

これまでベタ塗りだったんですが、iOS7のフラットデザインって微妙にグラデーションかかってるんですよね。

どうでしょうか?それっぽくなったでしょうかね?

え?こんなブログお気に入り登録しないしどうでもいい?

そうっすよねー…

まとめ

ファビコンもウェブクリップアイコンも設定されてなくても別に問題はないものなんですけど、デフォルトのままじゃなんか味気ない気もするし、設定されてあれば目に付きやすいですよね。

サイトをお持ちで、まだウェブクリップアイコンを設定していないという方は是非設定することをオススメします。

それでは。

[スポンサードリンク]

[スポンサードリンク]

Author:トム
Author :
トム

このブログでは便利な生活グッズや家電、iPhoneアプリなどを中心に、僕のおすすめアイテムを紹介していきます。良いところはもちろん、イマイチな点も含めてレビューしていこうと思うので、購入前の判断材料なんかになれば幸いです。

Tag Cloud

Categories

Archives

Recent Posts

Popular Posts