favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。
モダンブラウザーでは通常のPNGやGIF形式でも表示出来ますが、IEでは今のところ「.icoファイル」でないと表示出来ないので、PNGなどで作った画像を「.ico」ファイルにジェネレーターなどで変換しましょう。
Photoshopからそのまま「.icoファイル」に書き出せるプラグインなどもありますが、「.icoファイル」の特性であるマルチアイコン化（複数のサイズの画像を１つのicoファイルで持つ事が出来る）をするには、やはりネット上にあるジェネレーターを使うのが便利です。
ネット上にはfaviconジェネレーターは沢山ありますが、ここでは下記のジェネレーターを使います。
tools.dynamicdrive.com
faviconのサイズですが、基本的には16px×16pxですが、OSやデバイスによって様々ですべてに対応させるとなるときりが無くなってしまうので、今回は
32px×32px
の1種類のみに限定します。
Webサイトに必要なfaviconが21個になっていた – IT探検の追憶
肝心の記述ですがIEのバージョンによって多少変わってきますが、
今のところIE10以下にも対応させるには以下の記述がベターだと思います。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Faviconを表示させる</title> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </head>
また、icoファイルは他のデータと比べるとキャッシュが強い傾向があるので、新しいfaviconに変えたのに反映されない時などは、ブラウザーのキャッシュをクリアしてみて下さい。
favicon.ico はlink要素で明示的に指定するべきか
photoshopに専用のプラグインを入れる事で、photoshop上で「.ico」形式で書き出すことが出来ます。
コメント