Favicon（ファビコン）を作りました。デザインはヘッダーのイメージから「W」を取って四角にしただけの簡単なものです。以下は作り方の簡単なメモです。
作成する画像形式とサイズ
Favicon で使用される画像は16×16ピクセルのICO形式（*.ico）です。しかし、デスクトップにサイトへのショートカットをドラッグ・アンド・ドロップすると使用されるのは32×32ピクセルのサイズです。32×32ピクセルのサイズが無ければ16×16ピクセルが使用され、ちとかっこ悪いです。ICO形式だと、この２つのサイズを１つにまとめる事ができるそうなので両方に対応できます。また、favion の画像形式はPNGでも良いのですが、今のところ対応しているブラウザが少ないようで、もちろんIEは対応していません。なので作るのは、32×32ピクセルと16×16ピクセルの両方がまとめられているICO形式のfavicon: favicon.icoです。
favicon.ico を作成
まずは画像編集ソフト（僕は Fireworks 使用）を使って32×32ピクセルのビットマップ画像（*.bmp）を作ります（＠icon変換で読み込める形式であれば他の形式でも問題ありません）。これが出来たら、全く同じ画像の16×16ピクセルをビットマップ画像で作ります。これで２つのサイズの違う、同じ画像が出来上がります。これらの画像をアイコン変換ソフト「＠icon変換」を使ってアイコンに変換します。
＠icon変換に作成した２つのビットマップファイルを読み込みます。そして、「@icon変換: マルチアイコン作りのチュートリアル」を参考にしてマルチアイコンを作成します。画像の色数は同じなので、32×32ピクセルを上に並べます。両方の画像を選択して、[マルチアイコンに保存] をすれば完了。保存するときのファイル名は favicon.icoにします。
WordPress ブログに設置する
作成した favicon.ico を、使用しているテーマフォルダにアップロードします。僕はテーマで使用している画像は全て /themes/WaviaeiDesign/img/にまとめてあるので、そこにアップしました。アップロードする場所はテーマフォルダでなくても、例えばルートフォルダにしても別に問題は無いと思います。ここでは/テーマフォルダ/img/として話を進めます。
アップロードしたら、次はテーマの header.php ファイルを編集します。 head 内に以下の２行を付け加えます。
[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のアップロード先に応じて変更して下さい。２行目は一部のブラウザ（おそらくIE）対策です。（W3C）
Firefox だと、ページを再読み込みすると favicon が適用されます。IEは一度「お気に入り」に登録して、そこからアクセスすると favicon が表示されます。
favicon の表示はOSとブラウザにより微妙に動作に違いがあるようです。
0 Comments
2 Pingbacks