ファビコンとはホームページのイメージアイコンです。
ブラウザのタブや、お気に入りで目立つことができます。
必ず必要なものではありませんが、ファビコンが設定されているとホームページを覚えられやすくなります。
サイトに合わせたデザイン設定が必要で、一度設定したら変更しない事が重要です。
ファビコンの作り方と設置方法について解説します。
1.ファビコンの元になる画像を作る
デザインを決めるの時間はかかりますが、細かい画像は使えないので自分でデザインすることをお勧めします。
あしすと屋では頭文字の「あ」で作ってみました。
ファイル形式はPNG , GIF , JPGであれば大丈夫です。
画像の大きさは「16px × 16px」が最低限必要になります。
ファビコンは複数の画像ファイルを組み合わせて一つのファビコンファイルを作成します。
そして、環境に合わせて適切なサイズの画像を表示させるのです。
あしすと屋では6つの画像サイズを作成することを推奨します。
| 16×16 | ブラウザのタブで使うアイコン |
| 24×24 | ピン留めサイトのブラウザUI |
| 32×32 | お気に入りで使うアイコン |
| 48×48 | Windowsのサイトアイコン |
| 57×57 | iOSのホームアイコン |
| 64×64 | 高解像度のWindowsのサイトアイコン |
最初に64×64を作って、縮小するだけなので手間はかかりません。
こんな感じで6つのPNGファイルを作成しました。
2.ファビコンに変換する
作成したPNGファイルをファビコンファイル（.ico）に変換します。
変換は無料のWebサービスを使用します。
こちらのサイトが高性能で簡単にファビコンを作成できるのでおすすめです。
http://ao-system.net/alphaicon/index.php
①PNGファイルをアップロードします。
②「アイコン作成」をクリックすると、右側にビュー表示されます。
③問題なければ「アイコンダウンロード」で出来上がり！
3.ファビコンをホームページに設置する
ダウンロードしたファビコン(.ico)はホームページのルートディレクトリに設置すれば認識されます。
もしくは<head></head>内に下記のコードを記述します。
※ファイルのパスは環境に合わせて設定してください。
<link rel=”shortcut icon” href=”http://www.sample.jp/favicon.ico” type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.sample.jp/favicon.ico” type=”image/vnd.microsoft.icon”>
設定が完了したらブラウザで確認すればOKですが、反映されるまで時間がかかることがあります。
一度設定してしまえば、ずっとそのままなのでホームページを作ったら一緒に設定してしまいましょう。
