ファビコン付けるにあたってコーディングで困ったことのメモ

コンテンツと関係ないから後回しでいいや、と思ってずっと放置しておいたファビコンをとりあえず付けてみました。

画像作ってiconファイルに変換してメタタグ1行コード付け足せばいいや…と簡単に考えてたんですが、なぜか上手く表示されない。その辺のことをメモ書きしときます。

MIMEタイプをしっかり指定しないとダメ
1. HTMLやXHTMLで指定する方法
2. favicon.icoによる方法

MIMEタイプをしっかり指定しないとダメ

とりあえず画像を作って変換までは何の問題もなく出来ました。でファイルアップロードしたあとコード付け足して再読み込み…あれ、ファビコン表示されないぞ？

私がhead内に追記したのは以下のコード。

パスtypoかと思い、URLコピペしてブラウザのアドレスバーに突っ込んだら…あれ、ちゃんとファイルダウンロードのダイアログが出る。おかしいなぁ。

色々調べてるうちにこんなのを見つけた。どうやら type=”image/vnd.microsoft.icon” を明示的に指定しなければならないみたい。そんな例を見て

とタグを書き換えてみた。そしたらすんなりと表示されました。後追いでもうちょっと調べたらウィキにはこんなことが書いてました。

HTMLやXHTMLで指定する方法

HTML/XHTML内でFaviconを指定するにはhead要素の中でlink要素を次のように用いる。単独でも効果はあるが、両方指定するのが望ましいとされる。

<link rel=”shortcut icon” href=”http://example.com/favicon.ico” type=”image/vnd.microsoft.icon” />

<link rel=”icon” href=”http://example.com/favicon.ico” type=”image/vnd.microsoft.icon” />

ファイル名の決まりは特にない。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのようなフォーマットを用いても良い。ただし、Internet ExplorerはICO形式しか認識しない。

ウェブサーバ側ではアイコンのMIMEタイプを正しく指定する必要がある。なお、ICO形式ではimage/vnd.microsoft.iconである（代わりとして、また互換性問題としてimage/x-iconを指定する場合もあるが、IANAに登録された標準的なMIMEタイプを用いることが望ましい）。解像度と色数は次のものを用いる。16×16サイズの画像を含まないfaviconを指定した場合、一部のブラウザのブックマークリストなどで正しく表示されない可能性がある。

ICO形式：複数の色数と解像度（16×16と32×32の4ビット16色、8ビット256色、24ビット1600万色、さらにWindowsでは24×24, 48×48, 64×64、Mac OS Xなどで利用される64×64と128×128サイズのものを任意の色数）を保存したものをマルチアイコンとして保存

GIF形式：16×16サイズで256色

PNG形式：16×16サイズで8ビット形式（256色）ないし24ビット形式

favicon.icoによる方法

ルートディレクトリにfavicon.icoという名称のファイルを設置しておくと、HTML/XHTML中で指定が無くともFaviconとして認識するブラウザもある。

ただちょっと他所様のブログのソースを覗いたときに、修正前のソースと同様の記述してあって、正常にファビコン表示されるサイトもあるんですよね。その辺がいまいちスッキリしないですけど。

そういったサイトのファビコンはURLコピペでアドレスバーから直で指定するとファイルダウンロードのダイアログではなく画像としてそのままブラウザ表示されるんですよね。うーん、どういうことなんだろう…良く分からない。

対処療法的な話で申し訳ないですが、もし同じような現象の人がいたらファビコン設置する際にはきちんとMIMEタイプを指定しましょう（ファビコンのファイルフォーマットとパスの確認は当然）、もしかしたら直るかもしれないね、ということでした。

スッキリしない感じなのでもうちょっと調べてみたいと思いますが「へへん、そんなことも知らないのかい？」という方がいましたらコメ欄でもSNS経由でもご教示いただけるととってもうれしいです。あぁ他力本願。