オンラインPC館

ファビコン

ファビコン

ファビコンとは簡単にいうとサイト用のアイコンの事です。
サイトにアクセスするとブラウザに表示されるサイト固有のアイコンがファビコンです。
このファビコンを作成する際に重要となるのが視認性で、誰が見てもわかりやすくそのサイトに違和感のないデザインが好ましいようです。
ファビコンとは

ファビコンの作成方法

ファビコンの作成

ファビコンを作成するには正方形の画像を用意し、以下のようなサイトを利用して作成します。
作成時は文字やデザイン部分をできるだけ大きく捉えると比較的きれいに作成できます。
作成したらディレクトリのどこか適当な場所に保存してアップロードします。
Web素材作成ソフト
ファビコン作成

マルチアイコンの作成

マルチアイコンは一つのアイコンの中に複数のアイコンを統合したアイコンです。
最近はPCだけでなくモバイル端末でもサイト用のファビコンやアイコンを使用します。
しかし、それぞれサイズが異なるため、こうした複数サイズのマルチアイコンを利用するケースが多いようです。
一般的には以下の4種類のサイズが利用されますが、最小の16サイズがどうしても汚くなる場合はファビコン作成サイトなどで修正してください。
なお、あまり多くのアイコンを統合するとファイル容量が大きくなるため、ファビコンの表示に時間がかかります。
Web素材作成ソフト
ファビコン作成

一般的なマルチアイコンに使用されるサイズ:64x64、48x48、32x32、16x16など

ファビコンコード

ファビコンをアップロードしただけでは反映されないのでコードを記述します。
HTMLか.htaccessで設定が可能ですが、.htaccessの方が効率的です。
ファビコンの表示設定
ファビコン

ファビコンテクニック

ファビコン画像の軽量化

ファビコンの画像ファイルも最適化する事ができます。
最適化するとローカル上では白紙のアイコンになりますが、Web上では正常に表示されます。
pngquant
PngGauntlet

ファビコンをPNG圧縮→拡張子を「.ico」に戻す

オンラインPC館