Webページ制作時に、Webページそのものの機能やデザインにばかり気をとられていて、ついに設置し忘れがちなのが、ブックマークした時やタブ表示した際にWebページ名の横に並ぶ小さなアイコン、それがfavicon(ファビコン)です。

うちのWebページもそうだ……と思われた方も少なくないはずです。

Webページを利用したことがある多くの人は見たことがあるでしょうが、Webページを制作時に設置を忘れている方も少なくありません。単なるアイコンのように思いがちですが、Webページを一目でわかるように区別してくれる重要なものですので、ぜひ設置しておきたいものです。

本記事では、faviconの基礎知識から検証時の注意点までをまとめてご紹介します。

一通りご覧いただくと、初心者の方でもfaviconの作り方を知ることができますので、ご興味のある方は目をとおしてみてください。
  

1. favicon(ファビコン)とは

そもそもfaviconとは

先述のとおり、favicon(ファビコン)は「Favorite icon(お気に入りのアイコン)」という言葉を省略したもので、運営者がWebページに設置するシンボルマークのことです。主に、アドレスバーやブラウザのタブ、スマートフォンでWebページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。

ferretを例にした場合は、画像のようなアイコンが表示されます。
画像内の赤枠で囲ったアイコンをfaviconといいます。様々なWebページを開いてみるとfaviconを設置してあるものがありますので、確認してみるといいでしょう。
  

2. faviconの基礎知識

faviconの基礎知識

faviconは必ずしも設置しないといけないとは限りませんが、設置することによるメリットがあります。

メリットの1つとして挙げられるのが、たくさんのタブを開いている時に、そのタブがどのページユーザー側がわかりやすいということです。ページをアイコンによって認識してもらうことで、記憶、リピートに繋げることができます。簡単な画像作成能力とHTMLスキルがあればすぐに作れますので、ちょっと面倒でもぜひ設置しておきたいものです。
  

3. faviconのサイズやフォーマットなど

faviconのサイズはブラウザごとに推奨サイズが異なります。

様々なサイズが存在しますが、主なサイズは以下のとおりです。

全てを用意する余裕がないという方は「16px × 16px」「32px × 32px」のように、一部だけでも用意しておくといいでしょう。
ワンサイズだけで使い回すと、場合によっては縮小した際に表示が綺麗でなかったり、正しく縮小できないことがありますので、複数用意することをオススメします。

● 主要なfaviconサイズ

16px × 16px:IE タブ
24px × 24px:IE9 ピン留め機能
32px × 32px:Chrome、Firefox、Safari などのタブ
48px × 48px:WindowsのWebページアイコン
64px × 64px:高解像度 WindowsWebページアイコン

フォーマットは「.png」「.gif」「.ico」がありますが、ブラウザによっては「.png」「.gif」に対応しない可能性がありますので「.ico」がオススメです。
  

4. デザイン時の注意点、コツ

faviconはどのサイズもそこまで大きくありませんので、あまり複雑な細かいデザインではなく、シンプルで小さくても見やすい・わかりやすいデザインにしましょう。また、小さなアイコンだけに、ドットを意識して作るとかなりはっきりと見やすいデザインになります。

何らかのデザインを縮小する場合でも、ドットを意識してやや調整すると綺麗なアイコンに見えます。
  

5. 検証時の注意点

faviconを設置した際に気を付けたいのが、faviconが正しく表示できているかどうかです。

BASIC認証がかかっている状態で確認すると、faviconがちゃんと表示できないことがあります。ちなみに、BASIC認証とは基本認証とも呼ばれる認証機能のことです。また、AndroidにおいてBASIC認証がかかった状態でチェックすると問題ないのに、実際にあげてみると正しく設置ができていないというケースがあるようです。

favicon設置後のチェックは、BASIC認証がかかっていない状態で行うか、ローカル環境で行いましょう。
  

6. faviconが作成できるツール紹介

faviconはPhotoshopなどのソフトを使っても作れますが、専用ツールを使えばより簡単に作成することが可能です。

ここからは、faviconが作れるツールをピックアップしてご紹介します。
  

favicon.cc

favicon.cc
http://www.favicon.cc/

会員登録、インストールいらずで、ブラウザ上で手軽に使えるfavicon作成ツールです。画面右側のカラーピッカーで色を選んだ後、フレーム内の四角を選択して塗りつぶしていけばデザインが完成します。作成中、リアルタイムでプレビューを見ることができ、実際の設置イメージが確認できるのが大変便利です。また、少し設定が必要ですがアニメーションのfaviconも作成可能です。

ほかのユーザーが作成したデザインもチェックできますので、デザインの参考にしたい方も利用してみてはいかがでしょうか。
  

半透過マルチアイコンfavicon.icoを作ろう!

半透過マルチアイコンfavicon.icoを作ろう!
https://ao-system.net/favicon/index.php

16 x 16、32 x 32、48 x 48の3サイズに対応したfavicon作成ツールです。任意の画像をアップロードして作成ボタンをクリックするだけで、手軽にfaviconが作成できます。画像を使うことができ、しかも日本語のサービスですので、初心者にも使いやすいのではないでしょうか。

URL入力バー、タブ、お気に入りリストに設置した場合のプレビューが確認できる点も便利です。
  

ToYcon

ToYcon
http://www.gigafree.net/tool/icon/toycon.html

ToYconは、ドラッグ&ドロップの簡単作業で誰でもICO形式のアイコンファイルが作れるツールです。用意しておいたPNG・BMP・JPG・TGA・GIFといった画像をもとに、一発でアイコンファイルを生成します。マルチプルアイコン(複数のアイコンを格納したもので、ユーザーの環境に合わせてアイコン表示が自動的に切り替わります)にも対応可能です。
  

@icon変換

@icon変換
http://freesoft-100.com/review/aticon_henkan.php

全7種類の画像形式(BMP・ ICO・ PNG・ PSD・ EXE・DLL・ICL)に対応した、画像変換・アイコン作成ツールです。ICOファイルはもちろん、BMP・PNG・ICL形式に変換、保存することができます。マルチプルアイコン、透過マスクの編集機能にも対応しています。
  

Quick Any2Ico

Quick Any2Ico
http://www.gigafree.net/tool/icon/QuickAny2Ico.html

各種画像ファイル(JPG・PNG ・BMP・GIF・JPEG・ WMF・ EMF・ TIFF・TIF・ICO)を、複数サイズ表示に対応したマルチプルアイコンに変換してくれるツールです。
16x16 ~ 512x512までに対応しているため、様々なサイズが作れるのが特徴です。

彩彩畑

***
http://www.hm.h555.net/~irom/ssb_help/ssb_help_47.htm

菜々畑はイラスト作成用のフリーソフトなので、使用するにはインストールする必要があります。(環境にもよりますが、インストールは数分で完了します。)
起動後の画面で右下にある「アイコン」ボタンをクリックすると、アイコン作成画面に入ります。

基本図形のテンプレや文字挿入も簡単に行うことができます。インストールする手間はありますが、機能は豊富でかつ一目見ただけでどのような機能が備わっているのかわかりやすい設計になっています。

既にある画像をファビコンサイズに変換する無料ツール

会社やブランドのロゴをそのままファビコンとして使用したい場合は、画像を取り込むだけでファビコンサイズに変換してくれるツールを利用しましょう。どのツールもプレビュー機能がついているので、ダウンロードする前に実際のサイズ感を把握することができるので、失敗も防ぎやすいでしょう。

favikon

***
http://www.favikon.com/

1.画面中央のモザイク柄の部分をクリックすると画像選択の画面が表示されます。
2.ファビコンにしたい画像を選択するとサイト上に画像が表示され、下部にファビコンのプレビューが表示されます。
3.プレビュー表示を見て問題なければ「DownloadICO」か「Download PNG」を選択してください。(大体の場合PNG形式で保存すれば良いでしょう)

favicon generator

***
http://tools.dynamicdrive.com/favicon/

1.画面中央の枠内にある「ファイルを選択」をクリックすると、画像の選択画面が表示されます。
2.画像を選択し、下部にある「Optional」の項目の「Merge with a 32x32 desktop icon.」を選択します。
3.「create icon」をクリックすると、下にデスクトップの設置イメージが表示されます。
4.問題なければ「Download Favicon」を選択します。

まとめ

以上、 faviconの基礎知識から検証時の注意点までをご紹介しました。いかがでしたでしょうか。

faviconは作り方さえ理解していれば、誰にでも簡単に作成できます。無いよりもある方がユーザーに認識してもらいやすくなりますので、Webページのシンボルマークとして設置しておきたいものです。

とはいえ、操作が難しいPhotoshopで作るのは、初心者にとって簡単なことではありません。そこで、簡単にfaviconが作れる専用ツールを使いましょう。

favicon作成ツールがあれば、様々なデバイス・ブラウザにも対応するfaviconがサクッと作れます。今までfaviconを設置していなかったという方も、ぜひこの機会にツールを活用し設置してみてはいかがでしょうか。