faviconr（ファビコン）とは？役割や作成ツール、検証時の注意点までを解説

更新日: 2020年11月30日

デザイン

マイページにお気に入り

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

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

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

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

favicon（ファビコン）とは
favicon（ファビコン）の基礎知識
favicon（ファビコン）のサイズやフォーマットなど
デザイン時の注意点、コツ
検証時の注意点
favicon（ファビコン）が作成できるツール紹介
既にある画像をファビコンサイズに変換する無料ツール
1. favikon
2. favicon generator
まとめ

favicon（ファビコン）とは

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

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

favicon（ファビコン）の基礎知識

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

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

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」がオススメです。
　　

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

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

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

検証時の注意点

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

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

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

favicon（ファビコン）が作成できるツール紹介

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

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

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までに対応しているため、様々なサイズが作れるのが特徴です。

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を設置していなかったという方も、ぜひこの機会にツールを活用し設置してみるのもいいでしょう。

Web制作についてもっと知る

Webサイト作成に役立つCMS。そのメリット・デメリットを解説！

CMSとは、コンテンツ・マネジメント・システム（コンテンツ管理システム）の略称で、Webの専門知識を持たない初心者でも、簡単にWebサイトの運営ができる管理システムのことです。今回はCMSのメリット・デメリットに加え、導入前に知っておきたいポイントもまとめました。

駆け出しWebディレクターが覚えておきたい、Web制作の工程

Webディレクターをこころざしている人、もしくはWeb担当者になり新たにWebサイトを作るとなった際、実際にどのようにして制作が進むのか不安になることも多いでしょう。Web制作における工程は、そのプロジェクトによりけりな部分もありますが、大枠を覚えてしまえば難しいことはありません。今回はWeb制作の工程を詳細に説明していきます。