このサイトにファビコンを付けようとして古い記憶を手繰り寄せてみたけど、8割方忘れてしまってた。そーゆーわけでファビコンの指定方法を調べてみた。
対象にするブラウザ
今回は、普段使っているPCに入っているChrome、Firefox、Edgeでやってみた。IEの最新版、Safari・Operaは…入れるのめんどくさいからやらない。
ファビコンの指定方法
とりあえず、↓これを<head>内に記述すればよいことが分かった。
<link rel=”icon” href=”ファイル名”>
relとhrefだけでよい。ファイルタイプを指定する、「type=”image/png”」（”png”は画像に合わせて記述）はなくてもよいみたい。
画像ファイルタイプ
昔は.icoファイル一択みたいだったが、今はブラウザで表示できる画像ファイルであれば何でもよさそうである。
画像ファイルの画素数
画像ファイルの画素数はいくつでも良いようである。128*128の、ファビコンとしては大きな画素数でもうまく縮小して表示してくれた。
アニメーション表示をできるか？
動画をファビコンにしたいときは、
<link rel=”icon” href=”/img/favicon/animation.gif”>
と、gifなどの動画ファイルをそのまま指定すればよい。
しかし、現状アニメーション表示してくれるのはFirefoxのみである。ChromeやEdgeは対応する予定があるらしい。
昔のIEでの書き方
おまけとして、昔のIEでのファビコンの指定方法を書いておく。
IE9では
<link rel=”icon” type=”image/vnd.microsoft.icon” href=”/image/favicon.ico”>
と、「type=”image/vnd.microsoft.icon”」の記述が必要だった。
また、IE8以前では
<link rel=”shortcut icon” href=”/image/favicon.ico”>
と、relの書き方が異なっていた。
IEは開発終了になってEdgeに移行するため、古い書き方をしているのであれば、修正しておこう。
参考サイト
コメント