ファビコンの作り方と設定方法

ホーム > ブログカスタマイズ > 画像系 > ファビコンの作り方と設定方法

ファビコンの作り方と設定方法

2014.09.16

ブラウザのタブとブックマークにオリジナルのアイコンを表示したいと思って
ファビコン(favicon)を作ってみたっ!!

そして、せっかくなのでタイトルロゴっぽくページ最上部にもボタンみたいに埋め込んでみた＾＾；　ロゴ？の部分が数字の「９」にしか見えないけど...
これはブログタイトル「INTEREST」の頭文字「 I 」を「Milano LET」と言うフォントで書いた物で、数字の「９」ではありません...ｗ

「ファビコン(Favicon)」とは、Webブラウザのアドレスバーやタブ、それにブックマーク(お気に入り)やショートカット等にも使われるアイコン画像で、“favorite icon”の略。元々は「Internet Explorer」の機能の一つだったが、現在では他のほとんどのWebブラウザでも利用できるようになっていて、一般的には「16×16px」のICO形式が用いられるが、ブラウザによってはGIF形式やPNG形式も利用可能。

Google Chromeで、幾つか代表的なサイトを見てみるとこんな感じ →
タブのタイトルと、ブックマークに付いてるアイコンがファビコンで
このアイコンは自分で好きに作る事が出来て、簡単に表示出来ます。　

そして、オリジナルのファビコンがあると他のサイトと区別しやすくなるので結構実用的。特に沢山のタブを開いてる時なんて、ページのタイトルとかタブで見えないしね＾＾；

【ファビコンの作り方と設定手順】

1.ファビコンに使う画像を作る

まずは、ファビコン(Favicon)で使う画像を、画像編集ソフト等を使って用意します。
どんな感じにするかは個々のセンス次第ですが、ロゴや良いネタが無いって場合は単純に●や■に色を付けるだけでも良いと思います。
また、画像のサイズはこの後の手順で自動的にサイズの調整がされるので基本的には何でもOKですが、内容次第では、自動で縮小された時に画質が乱れたりする場合もあるようなので、そんな場合は16×16px、24×24px、32×32px等、サイズ毎に画像を用意しておく方が綺麗に仕上がります。
一番基本のサイズは「16×16px」でとにかく小さくて、繊細な表現は見え辛くなるので、それを考慮して作ると良いですね
そして、画像のフォーマットは「.jpg」「.gif」「.png」等でOKです。
※この後の手順で、最終的にマルチアイコンに出来る「.ico」に変換します。

このページのトップへ

2.「.ico」形式に変換してマルチアイコンを作る

上記で作った画像を、複数サイズのアイコンをまとめて1つのファイルに収められる「.ico」形式に変換してマルチアイコンにします。
そうする事によって複数サイズのアイコンを用意する場合でも１つの「.ico」ファイルがあればOKです。
複数サイズのアイコンを用意するのは、使われる場所によって「16×16px」「24×24px」「32×32px」等、表示されるアイコンの大きさが異なる為で、綺麗に表示する為には少なくともその3サイズを含む「.ico」ファイルを用意しておくと良いです。

その「.ico」形式のアイコンファイルは、ソフトを使ったり、サイト上で手軽に作成出来ますが、その中でも操作が簡単で、作成したアイコン(ファビコン)をプレビューで確認出来る下記のサイトが便利です。

favicon.icoを作ろう！ ‐ 16x16px、32x32px、48x48pxのマルチアイコンが簡単に作れます。
x-icon editor ‐ 英語表記ですが、読込んだ画像の修正も可能で4種類のマルチアイコンが作成可能。

※両サイトとも、それぞれのサイズごとに画像を指定出来ます。

ちなみに私は「x-icon editor」で「.ico」ファイルを作ったのですが、その際の編集画面が右の画像です　→
「x-icon editor」の方では読み込んだ画像の修正も可能なので、プレビューを見てから、修正したい時などに便利です。また右の画像では一番大きなサイズのアイコンだけ表示される内容を変えてます。

このページのトップへ

3.「.ico」ファイルのアップロードとhead要素内への書き込み

上記のサイトで「.ico」ファイルを作ると、ファイル名は「favicon.ico」となってると思います。
通常は、この「favicon.ico」を自分のサイトのルートディレクトリにアップロードすれば、自動的にファビコンと認識されるので基本的には、ファイル名は変えずそのまま使用します。

しかし、ルートディレクトリにファイルが置けない場合や、ページごとに違うファビコンを表示させたい場合はHTMLのhead要素内（<head>～</head>内）にlink要素を使ってファイルの場所を指定します。
※FC2ブログでファビコンを表示する場合は、この方法になります。
管理画面の「ファイルアップロード」で「favicon.ico」をアップロードして以下の記述をします。

<head>
<link rel="shortcut icon" href="http://○○○/favicon.ico">　
</head>

※http://～の部分はアップロードした「favicon.ico」のURLです。
例えば、私の場合は「http://blog-imgs-68.fc2.com/i/n/t/interest2014/favicon.ico」
また、この方法の場合は「favicon.ico」以外のファイル名でも使用出来ます。

以上の手順でファビコン(favicon)が表示されると思いますが、反映に多少時間が掛かったりする場合もあります。そんな時は、ページの再読み込み（リロード）をしたり、キャッシュを削除してみてください。

ブログランキングに参加中♪
良かったらポチっとお願いします