Faviconについて考える
そもそもfaviconとは
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。
Favicon - Wikipedia
サイトをブックマークやお気に入りに追加するとサイト名の横についてるアイコンが「favicon」です。 これはサイト制作時に自由に設定することが可能です。
設定方法
head内に下記のように記述します。
href=”xxx”
href=”xxx”にはfaviconへのパスを記述
type=“xxx”
typeには下記の値が設定可能です。 * image/vnd.microsoft.icon : ICO形式の画像を使用する場合 * image/gif : GIF形式の画像を使用する場合 * image/png : PNG形式の画像を使用する場合
faviconの作り方
faviconは様々な環境で表示されることを考慮して作ります。 IE用、MAC版safari用、Google TV用…と環境は様々です。 その環境すべてに適用させようと思うと必要なfavicon数はなんと21個です。
21個の環境って何と何と…何？
- favicon.ico: IE用
- favicon-16x16.png: タブ表示用
- favicon-32x32.png: Mac版Safari用
- favicon-96x96.png: Google TV用
- favicon-160x160.png: Opera 12 までのスピード・ダイアル用
- favicon-196x196.png: Android版Chrome用
- mstile-70x70.png: Windows 8 用
- mstile-144x144.png
- mstile-150x150.png
- mstile-310x310.png
- mstile-310x150.png
- apple-touch-icon-57x57.png: iOS用
- apple-touch-icon-60x60.png
- apple-touch-icon-72x72.png
- apple-touch-icon-76x76.png
- apple-touch-icon-114x114.png
- apple-touch-icon-120x120.png
- apple-touch-icon-144x144.png
- apple-touch-icon-152x152.png
- apple-touch-icon.png
- apple-touch-icon-precomposed.png
作り方
まずは「260×260」サイズのアイコンを作成します。 そしたら、一括置換してくれるwebサービスで21個生成して作業終わりです。
Favicon Generator for all platforms: iOS, Android, PC/Mac...
