WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Faviconの設定

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

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


ネット上にはfaviconジェネレーターは沢山ありますが、ここでは下記のジェネレーターを使います。
http://ico.bradleygill.com/index.php
qfor.info - 


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

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



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"/>
<link rel="apple-touch-icon" href="touch-icon.png" />
</head>

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



favicon.ico はlink要素で明示的に指定するべきか | 富永日記帳

広告を非表示にする