トップページへ

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

caraldo.net | WebとiPhoneとロードバイクが大好き！ » Web » IEで表示されない！？favicon.icoを完璧に表示する方法

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変換の起動

090111_icon.gif

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

起動したらこのボタンを押す

↑クリックで拡大します

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

単独iconとして保存

↑クリックで拡大します

変換したい画像を選択すると、画面左側に画像名が表示されます。
その画像名の上で「右クリック」→「保存」→「単独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

« 前の記事へ

次の記事へ »

トップページへ