ファビコン(favicon)の基礎知識と作成ツール&フリー素材30選

favicon ファビコン
DESIGNER

Webサイトのシンボルマークとして、タイトルバーの左側に表示されるファビコン
Webサイトをお気に入りに登録したときに表示されることから、お気に入りアイコン(Favorite Icon)を略してファビコンと呼ばれています。

ファビコンをWebサイトに設置すると、サイト内ユーザーの回遊率が上がったり、Webサイトを記憶してもらえる可能性が高くなったりします。

今回は、簡単に使えるファビコン作成ツールと、無料ファビコン素材を30個集めました。ぜひ、あなたのWebサイトをもっと素敵にするファビコン素材や作成ツールを見つけてください。

ファビコンとは

ファビコンとは

ファビコンとは、主にタイトルバーの左側に表示されるアイコンです。お気に入りアイコン(Favorite Icon)の略して「ファビコン」と呼ばれます。

一目でWebサイトを識別させたり、Webサイト同士の関連性を示すのがファビコンです。

たとえば、GIGのWebサイトにはGIGのシンボルマークがファビコンとして使われています。画像の4つのタブは、それぞれGIGが運営するWebサイトです。Webサイト名の「Workship ~」の頭文字「W」をモチーフにファビコンを作成しています。

ファビコンを設置するメリット

ファビコン設置のメリットは以下のふたつです。

Webサイトが一目で識別できる

ファビコンを設定しているサイトなら、ファビコンを見るだけでWebサイトを識別できます。設定していなければ、複数のタブに埋もれてしまい、もう一度Webサイトに戻ってくることすら難しいかもしれません。

同時に複数のタブを開いたままPCを使って作業をする方は少なくないと思います。複数のタブを開くと、文字よりもファビコンが表示される割合が多くなります。ファビコンをみてWebサイトを識別してもらえるよう、ファビコンを設置しましょう。

Webサイトが記憶されることで、繰り返し使ってもらえる

ユーザーがWebサイトを記憶しやすくなることで、Webサイトを繰り返し開いてくれる人が増えます。

「もう一度このWebサイトを利用したい」と思わせるために、ファビコンを設置してWebサイトを記憶してもらう可能性をアップさせましょう。ァビコンが設置されていなければ、ユーザーが繰り返しWebサイトを訪れても、名前を覚えてもらえないかもしれません。

ファビコンの一般的なサイズと形式

ファビコンは、対応させたいブラウザの表示サイズに合わせて、複数のファビコンを作るのが一般的です。Internet ExplorerやChrome、Safariなど、ブラウザによって表示サイズが違うためです。

サイズ(px) 対応するタブ
16px × 16px Internet Explorer
24px × 24px Internet Explorerのピン留め
32px × 32px Chrome、Firefox、Safari
48px × 48px Windows
64px × 64px 高解像度Windows

また、ファビコンの形式は「.ico」が理想です。「.gif」や「.png」でも表示できますが、対応していないブラウザがあるので、「.ico」が最も望ましいです。

ファビコン作成ツール22選

ファビコンを簡単に作成できるツールを22個集めました。

1. ICONSFLOW

ICONSFLOW

ICONSFLOWは、簡単にオリジナルのファビコンを作成できるWebサイトです。左下の「Create Amazing Icons!」ボタンをクリックすると、ファビコン作成画面が現れます。

PCや矢印、ライン、動物などの基本のテンプレートの中から、作りたいファビコンのベースを選んで編集していきます。基本形がすでに出来上がっているので、初心者でも簡単にファビコンを作成できます。

ICONSFLOW

2. favicon.icoを作ろう!

favicon.icoを作ろう!

favicon.icoを作ろう!は、画像をアップロードするだけで、ファビコン形式(.ico)のファイルに変換してくれるファビコン作成ツールです。PNG、JPG、GIF形式のファイルをアップロードすると、ファビコンの形式に変換されます。

すでにファビコンにしたい画像素材を持っている方におすすめのサイトです。

favicon.icoを作ろう!

3. iconifier.net

iconifier.net

iconifier.netは、最大で500KBの画像をアップロードできるファビコン作成ツールです。JPEG、PNG、GIFのファイルをアップロードすると、ファビコン形式に変換してくれます。

16×16pxをはじめ、7種類のサイズのファビコンを作成できます。

iconifier.net

4. Favicon Generator

Favicon Generator

Favicon Generatorは、文字や背景の色、テキストを入力してファビコンを作成するツールです。

特定の文字が入ったファビコンを作りたい方におすすめです。

Favicon Generator

5. Favicon Icon Drawing Program Online Free

Favicon Icon Drawing Program Online Free

右の一覧からカラーを選択して、ひとつひとつのフレームに色を入れていくファビコン作成ツール。

画面全体がすっきりしているので、余計なことを考えずにファビコン作りに集中できます。

Favicon Icon Drawing Program Online Free

6. favicon.cc

favicon

Webサイト上でファビコンを作成できるツールです。

カラーパレットから色を選び、ひとつひとつ塗りつぶしていきます。

デザインが直感的で見やすく、簡単にファビコンを作成できます。

favicon.cc

7. FavIcon Generator

Dynamic Drive

画像のファイルを選択するだけで、faviconを作成できるツールです。

生成された(favicon.ico)のファイルをWebサイトにアップして、

<link rel = “shortcut icon” type = “image / x-icon” href = “/ favicon.ico”>

というコードを書くだけで簡単にファビコンを導入できます。

FavIcon Generator

8. Dynamic Drive Favicon Editor(bata)

Dynamic Drive

オリジナルのファビコンを作成するツールです。

16×16のPNGアイコンを作成したり、既存のPNG画像をアップロードして編集できます。

Dynamic Drive Favicon Editor(beta)

9. Genfavicon.com

favicon

オンラインのファビコン作成ツール。

画像をリサイズし、.icoのフォーマットで保存することで、画像ファイルをファビコンに変換できます。

ダウンロード前に、プレビューでファビコンを確認できるので、便利です。

Genfavicon.com

10. Rreal favicon generator

favicon

画像をファビコン形式に変換するツールです。

また、自身のWebサイトで既にファビコンを使っている場合、それが本当に良いファビコンかどうか、チェックする機能もついています。

Rreal favicon generator

11. X-Icon Editor

X-Icon Editor

ファビコンをいちからデザインできるファビコン作成ツール。

ブラシ、鉛筆、消しゴムでデザインする、とてもシンプルな仕組みです。

フレームが大きいので、見やすくデザインしやすいのが特徴です。

X-Icon Editor

12. Faviconit

Faviconit

既存の画像ファイルをファビコン形式にするファビコン作成ツール。

ファイルを選んでボタンを押すだけで、簡単にファビコンが作れます。

Faviconit

13. Webstools

Webstools

自身でデザインしてオリジナルのファビコンを作成できるツール。

16×16か32×32のサイズで作成できます。

Webサイトがシンプルで見やすく、作業しやすいのが特徴です。

Webstools

14. favic-o-matic

favic-o-matic

『Favic-o-Matic』は、.icoと.png両方のファビコンを無料で作成するツールです。

また、既存のファビコンのデザインをチェックする機能もついています。

favic-o-matic

15. Favicon.pro

Favicon.pro

画像をアップロードするだけでファビコンを簡単に作成できるツール。

JPG、GIF、PNG形式のファイルを.ico形式に変換できます。

また、ファビコンは、16×16、32×32、48×48、64×64、128×128のサイズで作成できます。

Favicon.pro

16. faviconr

faviconr

コンピュータ上の画像からファビコンを生成するシンプルなファビコン作成ツールです。

JPG、PNG、およびGIF形式のファイルを利用できます。

faviconr

17. DeGraeve.com

favicon

画像をファビコン形式へ変換できる作成ツールです。

トップでは、カラフルなりんごを形成しているフレームをクリックするだけで、色を変えることができます。編集機能があまりついていないので、とてもシンプル操作しやすいのが特徴です。

DeGraeve.com

18. favicon.by

 favicon.by

オリジナルファビコンを簡単に作れるファビコン作成ツール。

鉛筆や消しゴム等の編集機能がすっきり整理されていて使いやすいのが特徴です。

favicon.by

19. RealWorld Graphics

realfavicon

オンラインのファビコン作成ツール。

鉛筆やライン、塗りつぶしなど、多彩なパレットののなかから選んで作成するので、オリジナルのファビコンを作成できる。

RealWorld Graphics

20. Junior Icon Editor

favicon

無料のアイコン・ファビコン作成ツール。

Windows 8,7、Vista、XP、2003,2000、ME、98,95、NT、iOS、Linux、Android、Webなどの複数のプラットフォームで利用できます。

ダウンロードして使うので、細かい調節が可能です。

Junior Icon Editor

21. IconFXポータブル

IconFXポータブル

ファビコン・アイコンを作成するためのフリーウェア。

インストールが必要な本格的なアイコン・ファビコンジェネレーターです。

40以上のエフェクトとカスタムフィルタがついているので、こだわりを持って作成したい方におすすめです。

IconFXポータブル

22. prodraw.net

prodraw.net

『Prodraw』は、JPG、JPEG、PNG、GIF、BMP、TIF、TIFF形式を利用できる無料のファビコンジェネレーター。対応形式の多さが魅力です。

サイズの範囲は、最小の16×16サイズから128×128pサイズまで、幅広く対応しています。

prodraw.net

ファビコン無料素材サイト8選

ファビコンをわざわざ作るのが面倒という方へ、すでに完成したファビコンを無料でダウンロードできるWebサイトを8個集めました。

23. Icons8

favicon

58,100個の無料フラットアイコンがあつまるサイト。

多くのアイコンのなかでファビコンは少なめですが、気にいったアイコンを見つけたら、ファビコン作成ツールで簡単にファビコンにすることができます。

Icons8

24. ICONFINDER

favicon

ファビコン・アイコンを幅広く取り扱うWebサイト。ファビコンは一部有料です。

『ICONFINDER』は通常のファビコンギャラリーと違って、デザイナーが作った独自のアイコン素材を見て、そこからデザイナーにオファーできます。

ICONFINDER

25. IconJ

 IconJ

『IconJ』は、ファビコンのギャラリーサイトです。

3,000種類以上のファビコンを幅広いジャンルで取り揃えています。

ファビコンのコードをコピーできるので、Webサイトに表示するのがとても簡単です。

IconJ

26. Free Favicon

Free Favicon

ファビコンギャラリーと作成ツールが一緒になったファビコンサイト。

ファビコンギャラリーでは、動物、ビジネス、国旗などジャンル分けがされていて、探したいファビコンを見つけやすくなっています。

Free Favicon

27. Re:vre

Re:vre

『Re:vre』は、ナチュラル・シンプル・キュートをテーマに、かわいらしいデザインの素材を無料で配布しているWebサイトです。

カラフルなハートやお花、宝石をモチーフにしたファビコンが掲載されています。

Re:vre

28. ファビコンギャラリー.com

ファビコンギャラリー.com

『ファビコンギャラリー.com』は、ファビコンのギャラリーサイトです。

11色のカラーと、「暮らし」「食品」などの20のカテゴリーからサーチできるので、ファビコンを探しやすいのが特徴です。

ファビコンギャラリー.com

29. Favicon Generator

Favicon Generator

ファビコン作成機能をあわせもつ、ファビコンギャラリーサイト。

アルファベットと色を選び、キーワードを入力すると、ファビコンがヒットする仕組みです。

作成機能も、画像をアップロードしてファビコンの.ico形式にするだけなので、とても簡単です。

Favicon Generator

30. かに沢のりおのいろいろサイト

favicon

フリーランスのイラストレーターの方が、自身のイラストやファビコン、動画素材を掲載しているサイト。

ドット絵のファビコン素材を無料で配布しています。バラやハンバーガーなど可愛らしい素材が多めです。

かに沢のりおのいろいろサイト

まとめ

初心者でも簡単にファビコンをデザインできる作成ツールや、ダウンロードするだけでおしゃれなファビコンが手に入る無料素材サイトなど、ファビコンを作ったりダウンロードしたりできるWebサイトはたくさんあります。

ぜひ、お気に入りの素材やツールを見つけて、ファビコンをWebサイトに設置するときの参考にしてください。

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship