webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

ファビコンの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

モダンブラウザーでは通常のPNGやGIF形式でも表示出来ますが、IEでは今のところ「.icoファイル」でないと表示出来ないので、PNGなどで作った画像を「.ico」ファイルにジェネレーターなどで変換しましょう。
Photoshopからそのまま「.icoファイル」に書き出せるプラグインなどもありますが、「.icoファイル」の特性であるマルチアイコン化(複数のサイズの画像を1つのicoファイルで持つ事が出来る)をするには、やはりネット上にあるジェネレーターを使うのが便利です。


ネット上にはfaviconジェネレーターは沢山ありますが、ここでは下記のジェネレーターを使います。
tools.dynamicdrive.com




faviconのサイズですが、基本的には16px×16pxですが、OSやデバイスによって様々ですべてに対応させるとなるときりが無くなってしまうので、今回は

32px×32px

の1種類のみに限定します。



Webサイトに必要なfaviconが21個になっていた - IT探検の追憶



.icoの場合

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


.pngの場合

<link rel="icon" href="favicon.png" type="image/png">


また、icoファイルは他のデータと比べるとキャッシュが強い傾向があるので、新しいfaviconに変えたのに反映されない時などは、ブラウザーのキャッシュをクリアしてみて下さい。



favicon.ico はlink要素で明示的に指定するべきか




photoshopに専用のプラグインを入れる事で、photoshop上で「.ico」形式で書き出すことが出来ます。

http://www.telegraphics.com.au/sw/icoformat.ja.html