サイトを作る際にうっかり忘れがちなファビコンの設置。

ファビコンって？

favoriteなiconでファビコン。

ロゴやイラストで作られたファビコンは、これがなんのサイトなのかをひと目で認識できる大切な存在。

ファビコンがあるとブラウザのタブも。すぐに識別できます。

ブックマークやお気に入りでも瞬時に判別できるファビコンは、見る人に親切な目印となります。

ファビコンを作る

Macのsafariはpng形式ですが、WindowsのIE用に「.ico」が必要。

サイズは16×16px。

「.ico」はMacのプレビューで作成できます。

Windowsユーザーの方にはこんなジェネレーターが。

FavIcon Generator（英語）

ファビコン favicon.icoを作ろう!（日本語）

いろんなサイズの画像を作成、コードまで吐き出してくれるジェネレーターも。

realfavicongenerator

WindowsのIE用。従来型ファビコン設定

<link rel="shortcut icon" href="favicon.ico">

PNGの用意

<link rel="icon" type="image/png" href="/画像16x16" sizes="16x16">
<link rel="icon" type="image/png" href="/画像32x32" sizes="32x32">
<link rel="icon" type="image/png" href="/画像96x96" sizes="96x96">

このサイトでは実装しておりませんが、Windows8のタイルっていうのもありました。

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffcc22">
<meta name="msapplication-TileImage" content="/画像">
<meta name="theme-color" content="#ffffff">

ファビコンだけでこんなに…！？

スマートフォンも用意しなくては。

ホーム画面やお気に入り、ブックマークに追加したとき表示されるファビコン、タッチアイコン。

iOSのホームスクリーン

<link rel="apple-touch-icon-precomposed" href="/画像">

AndroidのChrome

<link rel="icon" type="image/png" href="/画像" sizes="192x192">

AndroidではバージョンとブラウザによってiOS用のpng画像が表示されるようですが、Android用とiOS用両方準備しておけば大丈夫かな。。

全部用意しなきゃいけないの・・？

何種類あるんだよ…(´･ω･`)

このサイトでは、WinのIE用「.ico」と「.ico」を認識しないsafariに「png」。

スマホ用にiOSとAndroid用を設置。

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon-96x96 png" sizes="96x96">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon png">
<link rel="icon" type="image/png" href="/android-touch-icon png" sizes="192x192">

用意した画像はこんな感じです。どれが表示されるか確認できるようにそれぞれ少し違うものを準備。

数字が表示されたり色が変わったりする機能的なファビコンも、最近よく見かけます。

小さな小さなファビコン。

ちょっとした配慮が、使いやすさに繋がるのかも。