IEで表示されない！？favicon.icoを完璧に表示する方法

2009年1月11日

コメント（5）トラックバック（3） Posted by ; k.

IEで表示されない！？favicon.icoを完璧に表示する方法

今日初めてTOEIC受けてきました。結果は・・・OTZ

さて、気を取り直して、今日はfavicon.icoに関しての話です。

faviconというのは、ブラウザのアドレスバー（URLが表示されている部分の横）に出たり、お気に入りに登録した際に表示される小さなアイコンのことです。
ブランディングにも欠かせないあれです。

このfaviconを一から作成して各種ブラウザにしっかり読み込ませるまでの方法をご紹介します。

そんなの知ってるよって方も、もしかしたら知らない事があるかも知れないので見てみてください。　

Step1.まずはfaviconのデザインを作成する

まずはfaviconとする元画像を作成しなければなりませんね。

PhotoShopやFireWorks等のソフトを利用して、デザインを作成します。
デザインに関するお悩みは以下のサイトで解決できるかも知れません。

既にサイトにエンブレムぽいものがある場合それを元に、無い場合はよく使っている色や好きな色を使って作成すると良いかもしれません。実際に作成する favicon.ico ファイルのカンパスサイズは、32px 四方ですが（実際は 16px 四方で表示される）、作業をする際は広いカンパスの方がデザインしやすいので、その倍にあたる 64px 四方くらいで作成します。最終的には 32px 四方に縮小、実際は 16px 四方で表示される事を考えデザインするのもひとつのコツだとおもいます。
Photoshop で背景透過の美しい favicon (ファビコン) を作成する

こういったソフトをお持ちでない方は以下のサイトで紹介されているジェネレーターなんかが便利かと思います。
⇒Faviconギャラリー・ジェネレータまとめ | DesignWalker
⇒Faviconをサクサク作ってくれる８つの Faviconジェネレータサイト - Forgot the Milk.

いっぱいありますのでお好みでどうぞ。

Step2.Windows標準のicon形式に変換する

ここが今回の肝です。一番悩みました。

faviconを表示するには、作成したPNGやGIF画像をWindows標準のicon形式に変換する必要があります。

実はほとんどのブラウザでは特に形式を変換しないでも読み込むことが出来るのですが、肝心のIEがNGなのです。困った奴です。

IEでは「Windows icon形式」以外では表示する事が出来ません。

ここら辺に関しては以下の人力検索を参考にさせて頂きました。

まずWindows icon形式(bmp形式ではないよって拡張子を変えただけではだめ)でなければなりません。

「iconなのだからicon利用に最適化された形式であるべき」という思想です。

Windows icon形式のファイルは@icon変換などで作成することができます。
Internet Explorer 6でなぜかFaviconが表示されません。

というわけで、書き出した画像ファイルを@icon変換 - 画像とアイコンの相互変換ツール。favicon作成にも。というツールを利用してwindowsIcon形式に変換します。

変換するといっても特に難しい事はありません。

@icon変換の起動

DLして解凍後、フォルダ内のaicon.exeを起動します。

↑クリックで拡大します

起動したら上記画像のボタンを押します。
そして変換したい画像を選択します。

↑クリックで拡大します

変換したい画像を選択すると、画面左側に画像名が表示されます。
その画像名の上で「右クリック」→「保存」→「単独iconとして保存」としてあげればWindowsIcon形式のfaviconが完成します。

Step3.（X）HTMLにfaviconに関する記述を追加する

ルートディレクトリに設置し、アイコン名がfavicon.icoの場合自動的に認識されるようですが、念のため以下の様に記述してあげるのが良いでしょう。

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />
<link rel="Shortcut Icon" type="image/x-icon" href="http://example.com/favicon.ico" />

10/03/25追記
type="img/x-icon"と間違えて記述していた箇所を、type="image/x-icon"に修正しました。

これで作業は完了です。

お疲れ様でした。

faviconまとめ

IEでのチェックを忘れないようにしましょう。
favicon作成の際には拡張子以外にもちゃんとwindows標準形式のicon形式になっているかを確認しましょう。
iconをデスクトップにおいてみて、iconとして表示されていれば大丈夫かと思います。

ちなみにYahooJapanはTOPページのfaviconが何故かIEでだけ表示されません。
転送量とか気にしてるのかな～。

マニアになりたい方は以下もどうぞ。
⇒Favicon - Wikipedia

Tumblr

2009年1月11日

Design Web

このエントリーのトラックバックURL：

このエントリーへのトラックバック：

faviconファヴィコンを作ってみた。

ファヴィコンを作成するサイトはこちら。プログラムの記述。結局成功したのは、こちらのサイトさんの言うとおりに記述したときだけでした。（トラックバックしました。）

2009年2月12日 17:24 南イタリア＊シチリア生活

favicon表示されない…

オリンピック始まりましたね！朝起きたら丁度テレビでモーグルやってたんで、見てました。↑　起きた時間バレますねｗ　実は昼ですｗ上村愛子は４位…うーん、あとち...

2010年2月14日 20:49 もりにくすBlog

IEにも表示可能なファビコン（favicon）の設置方法！

ファビコン（favicon）表示完全版！IEでも表示可能なファビコンの設置方法をご紹介します。当ブログもやっとIEで表示するようになりました＾＾...

2010年12月21日 01:00 ブログアクセスアップ!初心者でも最速SEO術

次があるさーがんばれ(・∀・)９　

Posted by ; ミッチョメ： 2009年1月12日 03:29

こちらの通りファヴィコンをUPしてみましたら　ゆうべUPした時は見えていたのに今日は見えていないのです。

この原因についてどういうケースがありますか？

ほんとにIEなんとかしてほしいですorz

htmlに追加入力するソースを貼ってくれていたのでそれを使わせいただいたのですがtype="image/x-icon" /> このx-iconというところそのままでいいのか　何か個人のファイル指定をするところなのかがよく解らなくて（ほぼ初心者）
そのままUPした結果　上記のように
初めはきちんと見えていたのですが・・・・・

アドバイスありましたらお願いします

Posted by ; ROCK ： 2010年3月25日 16:58

>ROCK様

コメントありがとうございます。
頂いたURLをこちらの環境で見てみましたがしっかり表示されています！
windowsIE8,Fx3.6,Chromeで確認出来ました。
一度見えていたとの事ですので、普通の方法しか思いつきませんが

・キャッシュをクリアする
・お気に入りに登録し直してみる
・履歴も消してみる

等を試してみて下さい。

x-icon部分ですが、MIMEタイプの指定になりますので、そのままで大丈夫です。

私もこの辺りを説明出来る程詳しくはないので、x-iconとはなんぞや？と気になる場合は記事の最後にあるwikipediaをご覧下さい。
経験上、このx-iconを指定していないと、うまく表示されないブラウザがあります。

ソースを覗いたところtype="img/x-icon"になっていますので、type="image/x-icon"に変更した方が良いかと思います。
と、記事見直してたら記事内のミスでした、修正します。申し訳ありません。

これで無事見えると良いのですが。
頑張って下さい！

Posted by ; k＠管理人： 2010年3月25日 17:58

今　私のブログを見てみたらfaviconが見えてます！！