faviconを設置しました

Favicon(ファビコン)を作りました。デザインはヘッダーのイメージから「W」を取って四角にしただけの簡単なものです。以下は作り方の簡単なメモです。

作成する画像形式とサイズ

Favicon で使用される画像は16×16ピクセルのICO形式(*.ico)です。しかし、デスクトップにサイトへのショートカットをドラッグ・アンド・ドロップすると使用されるのは32×32ピクセルのサイズです。32×32ピクセルのサイズが無ければ16×16ピクセルが使用され、ちとかっこ悪いです。ICO形式だと、この2つのサイズを1つにまとめる事ができるそうなので両方に対応できます。また、favion の画像形式はPNGでも良いのですが、今のところ対応しているブラウザが少ないようで、もちろんIEは対応していません。なので作るのは、32×32ピクセルと16×16ピクセルの両方がまとめられているICO形式のfavicon: favicon.icoです。

favicon.ico を作成

まずは画像編集ソフト(僕は Fireworks 使用)を使って32×32ピクセルのビットマップ画像(*.bmp)を作ります(@icon変換で読み込める形式であれば他の形式でも問題ありません)。これが出来たら、全く同じ画像の16×16ピクセルをビットマップ画像で作ります。これで2つのサイズの違う、同じ画像が出来上がります。これらの画像をアイコン変換ソフト「@icon変換」を使ってアイコンに変換します。

@icon変換で32x32ピクセルを上にして両方の画像を選択

@icon変換に作成した2つのビットマップファイルを読み込みます。そして、「@icon変換: マルチアイコン作りのチュートリアル」を参考にしてマルチアイコンを作成します。画像の色数は同じなので、32×32ピクセルを上に並べます。両方の画像を選択して、[マルチアイコンに保存] をすれば完了。保存するときのファイル名は favicon.icoにします。

WordPress ブログに設置する

作成した favicon.ico を、使用しているテーマフォルダにアップロードします。僕はテーマで使用している画像は全て /themes/WaviaeiDesign/img/にまとめてあるので、そこにアップしました。アップロードする場所はテーマフォルダでなくても、例えばルートフォルダにしても別に問題は無いと思います。ここでは/テーマフォルダ/img/として話を進めます。

アップロードしたら、次はテーマの header.php ファイルを編集します。 head 内に以下の2行を付け加えます。

[php]
<link rel="icon" href="/img/favicon.ico” type=”image/x-icon” />
<link rel="shortcut icon" href="/img/favicon.ico” type=”image/x-icon” />
[/php]

bloginfo('template_url')は、使用しているテーマフォルダのURLを呼び出すタグです。 href=""の記述はfavicon.icoのアップロード先に応じて変更して下さい。2行目は一部のブラウザ(おそらくIE)対策です。(W3C

Firefox だと、ページを再読み込みすると favicon が適用されます。IEは一度「お気に入り」に登録して、そこからアクセスすると favicon が表示されます。

favicon の表示はOSとブラウザにより微妙に動作に違いがあるようです。

2 Replies to “faviconを設置しました”

  1. faviconをつくってみましたよ…

    恥ずかしながら 、手抜きながら 、もうええかと思いながら もfaviconをつくってみました (人生初)。
    とりあえずは表示ができたのでこれでOK。
    ですが当然いまいちの出来なのでま….

  2. […] ファビコンは古いロゴを元にした画像のままだったので、新しいロゴに変更しただけです。最後にファビコンを作成したのは随分昔だったので、その時に書いた記事を元に作成(笑)。 […]

Comments are closed.