ファビコン(favicon)の簡単な作り方と設定方法

シェアする

自分のホームページを持つことがあれば是非、やってみたいことのひとつにファビコンの設置がありました。
今回はファビコンの説明から、ファビコンアイコンの作成、設定までを紹介します。

スポンサーリンク
  

ファビコンとは?

まず始めにファビコンとは何のことでしょうか。

ファビコン(favicon)はfavorite icon(フェイバリット アイコン)の略で、お気に入りのウェブサイトに関連づけられたアイコンのことです。

ウェブブラウザでサイトを開いた時にタグのサイト名の前に小さなアイコンが表示される場合がありますが、これがファビコンになります。

ファビコンはサイト毎に管理者が好きなアイコンを設置できますので、お持ちのサイトがあれば是非、設置してみてください。

ファビコンはブラウザのタブ表示や、お気に入りのブックマークのアイコン等として表示されます。個性的で分りやすいアイコンを設定すればブックマークからも探しやすくなり、ユーザにも親切です。

ファビコンの画像サイズは主に小画像(16x16px)、中画像(32x32px)が使われ、その他にもブラウザの種類などによりさまざまなサイズのファビコンが使われるようです。

IEのタブであれば16pxのものが、高解像度のWindowsサイトアイコンでは64pxのものが使われたりもしますが、通常は16x16pxと32x32pxの二つを用意すれば大丈夫でしょう。

16x16pxが無い場合は32x32pxの画像を自動縮小して表示してくれますが、アイコンが縮小により綺麗に見えなくなったりすることもあるので、16pxと32pxのサイズの画像を用意しておくと良いです。

16pxと32pxの画像は一つのファイルにまとめることができます。このようなファイルはマルチアイコンと呼ばれます。他のサイズも合わせてトリプルアイコンなどもつくることもできます。

ファビコンの画像フォーマットは「.ico」のICO形式になります。最近はGIFやPNGでも表示できるものが増えているようですが、自分で作る場合は動作が確実なICO形式にしておきましょう。

通常、ファイル名は「favicon.ico」が使用されます。

ファビコン用ファイルの作り方

ファビコン用の画像を用意します。

今回はICO形式への変換に「Quick Any2Ico」を使うのでJPG/PNG/BMP/GIF/JPEG など各種画像ファイルが使用できます。

画像ファイルは最終的に16x16pxまで縮小されるので、複雑な画像では縮小した時に何の絵か分らなくなってしまいますので、
32x32pxのサイズで作っておくのが良いでしょう。もっと大きなサイズのアイコンも作る場合はそのサイズに合わせておきます。

下の絵は今回、このサイト用に作った画像です。見ての通り、細かすぎました。。。
せっかくなのでどんな感じに縮小されるのか見てみましょう。
%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b31

元の画像はIllustratorで作成しました。
この画像をfavicon.pngとして保存します。

ICO形式への変換には先程、説明したように「Quick Any2Ico」を使用しましたので、次のリンクからダウンロードして起動します。

Quick Any2Ico

元ファイルとして先程作った「favicon.png」を選び、ファビコン用ファイルといて「favicon.ico」を指定します。
また、下のオプションから必要なファイルサイズをチェックして選んでおきます。16×16、32×32を選び、その他は希望があればチェックしておきます。

%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b32

「Convert it!」をクリックすると「favicon.ico」ファイルができます。
できたファイルをダブルクリックすれば表示も確認できます。

ファビコンの設定方法

次はサーバー側での設定になります。

まずは先程作成したfavicon.icoファイルをウェブサーバへ設置します。

設置先はウェブサーバのドキュメントルートディレクトリになります。
ftpなどでpublic_htmlディレクトリなどのルートディレクトリにfavicon.icoファイルをコピーしておきます。

次にサーバーのタグ内にfavicon.icoファイルの設置先を指定しておきます。

ワードプレス(WordPress)の場合はダッシュボードから”外観”→”テーマの編集”でheader.phpやheader-insert.phpなどにこの記述を入れます。

これでファビコンの設定は終了です。

%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b33

絵が細かすぎるとこのように残念な感じになります。。。が、自分で作ったのでそこそこ満足はしています。しばらくはこのままにしておこうと思います。このファビコンは最初は背景を透過にしていたのですが、あまりにも目立たないので背景色をつけました。

シンボルなどでファビコンを作られる方はPNGで背景を透過させると良いですよ。透過していない場合は背景は四角い白色になります。

まとめ

画像を用意するのがちょっと大変という方は、簡単に自分のホームページのイメージカラーを組み合わせた正方形でも良いと思います。丁度、フランスやイタリアの国旗みたいなイメージです。

ファビコンの設置自体は手軽にできますので、是非、チャレンジしてみてください。

ブログランキング・にほんブログ村へ
にほんブログ村ランキング!

スポンサーリンク