そもそもファビコンのサイズって？

ファビコンはブラウザやタブレット・スマホのデバイスによってサイズが異なるため、複数のサイズがあります。
以下は代表的なサイズになります。

さらにデバイスの多様化により、ファビコンのサイズも多種多様になってきました。
全て用意しようとすると20種類以上あるといわれています。
これら全てを作って設定するのはとても大変なので、最低限必要な以下の3サイズを用意しましょう。

ブラウザのタブやアドレス欄には「16px × 16px」や「32px × 32px」で表示されることが多いため、この2種類を用意します。
また、スマートフォンに対応させるために「152px × 152px」も用意しましょう。
小さい画像を大きくすると画質が荒れてしまいますが、152pxの大きい画像を用意することで152px以下になったときは自動で縮小されるため、画質が荒れる心配がありません。

ファビコンの作り方

用意するサイズが分かればあとはファビコンを用意するだけです。
ここからは、ファビコンを作る方法をご紹介します。

1.画像を用意する

ファビコンは一番小さいもので16px × 16pxのサイズしかないため、複雑なデザインや色を避けてシンプルな線や色で作成する必要があります。
また、サイトのイメージを損ねないものが好ましいので、ロゴマークを使用したり、コーポレートカラーを取り入れると良いでしょう。

ロゴマークなどがない場合は、サイトや会社の頭文字を使ったり、丸や四角といった図形で表現するという手もあります。

今回は「レン太君」の頭文字　R　を使って画像を作りました。
コーポレートカラーでもある青色を使ったグラデーションと影を付けて立体的に仕上げています。
フラットデザインが多いので、あえて立体的にすることでタブで浮き上がってるように見せ、目立つようにしました。
画像サイズは、2で登場する無料変換サイト推奨サイズである512px × 512pxで作っています。

2.アイコン化する

画像変換サイトを使用して画像をアイコン化します。
「ファビコン 作成」「ファビコン　変換」などで検索すると、無料で変換できるサイトがたくさん出てくるので、自分に合ったサイトを活用すると良いでしょう。
今回は、無料のWEBサービス「favicon generator」を使います。

①サイトを開いたら「画像ファイルを選択」をクリックします。

②ファビコンにしたい画像を選択。
③「開く」ボタンを押します。

④すると画像が出てきますので「ファビコン一括作成」をクリックします。

⑤サイズごとに小さくした画像が表示されます。一つずつ画像を保存するのも良いですが、一括で保存すれば後で不足に気がついたとき作り直す必要がありません。
下部の「ファビコンダウンロード」をクリックしてダウンロードすれば、全サイズのファビコンが完成です。

実際にタブで表示させるとこのような見え方になります。
ここまで小さくなるため、複雑なデザインにはしないように心がけましょう。

ファビコン制作実績

実際にレン太君でファビコンを制作した１例をご紹介いたします。
ロゴの「花」をファビコンにすることでオリジナリティがあり、世界で一つのファビコンになりました。
視認性も高く、サイトのイメージともマッチしています。

お花部

まとめ

サイズが小さいながらも存在感が大きく、サイトのシンボル的な存在でもあるファビコン。
世界で一つのファビコンを作れば他社と違うことをユーザーに知ってもらい、会社を覚えてもらうことにも繋がります。
自社を覚えてほしいと考えている方は、設置することをオススメします。

レン太君ではホームページ制作の中でファビコンをオプション価格でご提供しています。
疑問点やサービス内容について分からないこと、お困りのことがあれば、お電話・FAX・メールで、お気軽にご相談ください。
レン太君スタッフがお客様にピッタリのプランをご提案します。