ファビコン(favicon)作成方法|IEも表示

ファビコン

ブラウザのアドレスバー(URL表示部分)や、ブックマーク登録の際に表示されるアイコン「ファビコン」。

なけりゃないでいいんですけど、あった方がサイト側もユーザー側も何だか気持ちよかったりします。サイトのブランディングには結構重要な要素だったりするので、表示させているサイトも多いですよね。有名サイトはほとんどあるようです。

そんなファビコンを作成し、表示する方法をメモ。

どのブラウザでも基本的な表示方法は一緒です。しかし、最もユーザー数が多いとされるIEに表示されないなんてこともあるようなので、今回はIEにもしっかり表示される方法を調べてみました。

ファビコン用のアイコン(画像)を作成

PHOTOSHOPやFIREWORKSなど、お持ちの画像作成ソフトで作ればオッケーです。ブラウザ上で作成できるサイトなんかもあるようなので、一番作りやすい方法を探してみてくださいね。

僕はFIREWORKSで作成してみました。

ファビコンサイズは32px四方。それが16px四方と縮小されて表示されるようなので、作りやすいサイズで作成し、縮小すればいいと思います。

ファイル形式はgifやpngなど自由です。

僕は32px四方サイズ、png形式で作成しました。

作成した画像をファビコン用ico形式に変換する

IE以外のブラウザはgifやpng形式、そのままでも表示可能らしいですが、IEはico形式に変換しないと表示されないようです。ico形式へと変換するには無料のダウンロードソフトなど色々ありますが、僕はブラウザ上で変換できるこちらのサイトを利用しました。

http://favicon.htmlkit.com/favicon/

favi01

参照を押し、さきほど作成したファビコン画像を選び、矢印の「Generate Favicon.ico」ボタンを押すと勝手にicoファイルを作成してくれます。

favi02

作成が終了すると、上記のようなプレビュー画面が表示されます。このサイトは勝手にアニメーションバージョンも作ってくれます。

ダウンロードボタンを押してZIPファイルを保存。中にicoファイルとアニメーションバージョンのgifファイルが入っています。gifファイルはIEで表示されません。今回はIEでも表示されるファビコン作りなので、大人しくicoファイルを使用します。

作成したicoファイルをサーバーの任意の場所にアップロードしておきます。

サイトhead内にファビコンを読み込むコードを記入

以下のコードをページのhead内に記述します。

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

上記は絶対パスですが、相対パスでもいいみたいです。さきほどアップロードしたicoファイルを指定します。

type属性の指定は必須ではないようですが、僕の場合指定ナシだとIEに表示されなかったので指定しておきました。

MIMEタイプとは、Webサーバとブラウザ間でやり取りされる拡張子を伝えるために指定します。拡張子に対応しているブラウザなら指定ナシでも問題ないようですが、サーバーによっても問題が生じることがあるようなので、指定しておいた方が安心です。

「type=”image/x-icon」は、このファイルはicoファイルですよーと伝えるための記述です。

サイトに記述が完了したらアップロードして終了です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です