WordPressでfaviconを表示させる

favicon(ファビコン)とは、ブラウザのタグに表示されているWebサイト(ブログサイト)のタイトルの横やブラウザのアドレスバーに表示されるアイコンの事です。私の場合、白い一枚メモのようなアイコンが表示されています。なんかちょっと格好が悪いです。
そこでもう少しどうにか成らないかなって思って、デザインセンスは皆無ですが、favicon(ファビコン)作りと表示をがんばってみようかと思っています。
この記事を書いてる段階でまだ手付かずなので、失敗する可能性も有りますが、、、

favicon(ファビコン)とは

favicon(ファビコン)とは、ブラウザのタグに表示されているWebサイト(ブログサイト)のタイトルの横やブラウザのアドレスバーに表示されるアイコンの事です。
favicon(ファビコン)はブラウザに表示されるだけでなく、お気に入り等でブックマーク時のWebサイト(ブログサイト)のタイトルの横にも表示されます。

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして用いられておりWebサイト(ブログサイト)やウェブページに配置するアイコンの俗称です。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものです。

favicon(ファビコン)作成

私はWindows 8 を使っているので、ペイントブラシを使って画像を作成します。
ちなみにファビコンのファイル形式は次のようになっています。

  • ICO形式:複数の色数と解像度(16×16と32×32の4ビット16色、8ビット256色、24ビット1600万色、さらにWindowsでは24×24, 48×48, 64×64、Mac OS Xなどで利用される64×64と128×128サイズのものを任意の色数)を保存したものをマルチアイコンとして保存
  • GIF形式:16×16サイズで256色
  • PNG形式:16×16サイズで8ビット形式(256色)ないし24ビット形式

良くわからないのですが、favicon作成サイトで16x16、32x32、48x48の3つを指定されるようなので、とりあえず今回は上の3つの大きさのPNGを作成しました。

ペイントブラシでfavicon(ファビコン)のイメージ作成

ペイントブラシを立ち上げ、サイズ変更で160x160ピクセルの描画領域を作ります。
ペイントブラシでファビコン作成1

次に、絵を描きます。
私も適当に絵を描いてみました。

絵が完成したら、とりあえずファイルを保存します。名前は適当でOKですが私はfavicon.pngとしました。
次に、48x48ピクセルにサイズを縮小します。
ペイントブラシでファビコン作成2
ファイルを保存します。私はfavicon48x48.pngとしました。
同じ要領で32x32ピクセルのfavicon32x32.png、16x16ピクセルのfavicon16x16.pngを作成し保存します。

これで、3つのサイズのfavicon.pngが出来ました。

マルチアイコンのfavicon.icoを作る

favicon(ファビコン)の3つのイメージからfavicon.icoを作ります。
と言っても方法もツールも無いので、ググってみました。
有りました。
ファビコン favicon.icoを作ろう!」さんでお願いすることにします。よろしくお願いします。

早速、作ってみます。
マルチファビコン作成
先ほど作成した3つのイメージをそれぞれにセットします。
favicon.ico作成をクリック!
マルチファビコン作成2
少しすると、右側に作成結果が表示されます。
ダウンロードをクリックすると目的のマルチアイコンが頂けます。
改めて「ファビコン favicon.icoを作ろう!」さん、ありがとうございます。

faviconの指定方法

さて、「ファビコン favicon.icoを作ろう!」さんのおかげで、マルチアイコンを手に入れられたので、次は設置します。

favicon.icoによる方法

今回は「ファビコン favicon.icoを作ろう!」さんのおかげfavicon.icoを手に入れられました。ルートディレクトリに favicon.ico という名称のファイルを設置しておくと、HTML/XHTML中で指定が無くともfaviconとして認識するブラウザもあるとのことなのでこれで行こうかと。古いブラウザには表示されないかも。

HTMLやXHTMLで指定する方法

古いブラウザでも表示されるようにするには、HTML/XHTML内でhead 要素の内側で link 要素を次のように宣言します。単独でも効果はあるが、両方指定するのが望ましいとされるそうです。

  • <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
  • <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

ファイル名の決まりは特にないそうです。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのような形式を用いても良いそうです。ただし、Internet Explorerは10以下ではICO形式しか認識しないそうなので要注意です。IE11ではPNG、GIF(アニメーション非対応)に対応したそうです。

この辺りは詳しく調査していないので、興味のある方は更にググって調べてみてください。
私の方は、上の「favicon.icoによる方法」を試してダメだったら、「HTMLやXHTMLで指定する方法」で試そうと思っています。

 favicon.icoをルート直下に置いてみる

早速favicon.icoをルート直下に置いてみました。
結果からいうと。。。やりました!!。。。できました!!
もし表示されなかったら、ファイル名を確認して見てください。それからブラウザがキャッシュを持ったままだと、上手く行かないかも。。。でも、ちゃんとブラウザを落としてやり直したら上手く行くかも。それでもダメなら、「HTMLやXHTMLで指定する方法」で試してください。

デザインセンスが無いので格好良くないですが、これでオリジナルのファビコンが出来ました。「ファビコン favicon.icoを作ろう!」さん、本当にありがとうございます。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください