産休・育休・介護の穴埋めをどうする？エース社員が不在でも回る組織づくり
- 【連載】もしも、採用のプロがあなたの会社の人事になったら
- HR
- 働き方
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. favicon.icoを作ろう！
favicon.icoを作ろう！は、画像をアップロードするだけで、ファビコン形式（.ico）のファイルに変換してくれるファビコン作成ツールです。PNG、JPG、GIF形式のファイルをアップロードすると、ファビコンの形式に変換されます。
すでにファビコンにしたい画像素材を持っている方におすすめのサイトです。
2. iconifier.net
iconifier.netは、最大で500KBの画像をアップロードできるファビコン作成ツールです。JPEG、PNG、GIFのファイルをアップロードすると、ファビコン形式に変換してくれます。
16×16pxをはじめ、7種類のサイズのファビコンを作成できます。
3. Favicon Generator
Favicon Generatorは、文字や背景の色、テキストを入力してファビコンを作成するツールです。
特定の文字が入ったファビコンを作りたい方におすすめです。
4. Favicon Icon Drawing Program Online Free
右の一覧からカラーを選択して、ひとつひとつのフレームに色を入れていくファビコン作成ツール。
画面全体がすっきりしているので、余計なことを考えずにファビコン作りに集中できます。
Favicon Icon Drawing Program Online Free
5. favicon.cc
Webサイト上でファビコンを作成できるツールです。
カラーパレットから色を選び、ひとつひとつ塗りつぶしていきます。
デザインが直感的で見やすく、簡単にファビコンを作成できます。
6. Genfavicon.com
オンラインのファビコン作成ツール。
画像をリサイズし、.icoのフォーマットで保存することで、画像ファイルをファビコンに変換できます。
ダウンロード前に、プレビューでファビコンを確認できるので、便利です。
7. Real Favicon Generator
画像をファビコン形式に変換するツールです。
また、自身のWebサイトで既にファビコンを使っている場合、それが本当に良いファビコンかどうか、チェックする機能もついています。
8. X-Icon Editor
ファビコンをいちからデザインできるファビコン作成ツール。
ブラシ、鉛筆、消しゴムでデザインする、とてもシンプルな仕組みです。
フレームが大きいので、見やすくデザインしやすいのが特徴です。
9. Webestools
自身でデザインしてオリジナルのファビコンを作成できるツール。
16×16か32×32のサイズで作成できます。
Webサイトがシンプルで見やすく、作業しやすいのが特徴です。
10. favic-o-matic
『Favic-o-Matic』は、.icoと.png両方のファビコンを無料で作成するツールです。
また、既存のファビコンのデザインをチェックする機能もついています。
11. Favicon.pro
画像をアップロードするだけでファビコンを簡単に作成できるツール。
JPG、GIF、PNG形式のファイルを.ico形式に変換できます。
また、ファビコンは、16×16、32×32、48×48、64×64、128×128のサイズで作成できます。
12. faviconr
コンピュータ上の画像からファビコンを生成するシンプルなファビコン作成ツールです。
JPG、PNG、およびGIF形式のファイルを利用できます。
13. DeGraeve.com
画像をファビコン形式へ変換できる作成ツールです。
トップでは、カラフルなりんごを形成しているフレームをクリックするだけで、色を変えることができます。編集機能があまりついていないので、とてもシンプル操作しやすいのが特徴です。
14. favicon.by
オリジナルファビコンを簡単に作れるファビコン作成ツール。
鉛筆や消しゴム等の編集機能がすっきり整理されていて使いやすいのが特徴です。
15. RealWorld Graphics
オンラインのファビコン作成ツール。
鉛筆やライン、塗りつぶしなど、多彩なパレットののなかから選んで作成するので、オリジナルのファビコンを作成できる。
16. Junior Icon Editor
無料のアイコン・ファビコン作成ツール。
Windows 8,7、Vista、XP、2003,2000、ME、98,95、NT、iOS、Linux、Android、Webなどの複数のプラットフォームで利用できます。
ダウンロードして使うので、細かい調節が可能です。
17. IcoFXポータブル
ファビコン・アイコンを作成するためのフリーウェア。
インストールが必要な本格的なアイコン・ファビコンジェネレーターです。
40以上のエフェクトとカスタムフィルタがついているので、こだわりを持って作成したい方におすすめです。
18. prodraw.net
『Prodraw』は、JPG、JPEG、PNG、GIF、BMP、TIF、TIFF形式を利用できる無料のファビコンジェネレーター。対応形式の多さが魅力です。
サイズの範囲は、最小の16×16サイズから128×128pサイズまで、幅広く対応しています。
19. favicon.io
『favicon.io』は、画像・文字・絵文字の3つの方法でファビコンを作成できる無料ツールです。
作成すると、favicon.icoのほか、16×16pxと32×32pxのPNG、Apple Touch Icon、Android向けのアイコン、site.webmanifestがまとめてZIPでダウンロードできます。
20. Free Favicon Maker（Formito）
『Free Favicon Maker』は、文字または絵文字からファビコンを作成できるFormitoの無料ツールです。
文字の場合は、Google Fontsのフォントや文字の太さ、文字色、背景色を指定できます。作成したファビコンはSVGとPNGでダウンロードできます。
21. RedKetchup Favicon Generator
RedKetchupの『Favicon Generator』は、文字または画像からファビコンを作成できるツールです。
文字の場合は、フォントや文字サイズ、背景色、文字色、角の丸みを設定できます。
必要なサイズのファビコン画像と、サイトに設置するためのHTMLコードがまとめて作成されます。
22. ファビコン作成ツール（Website Planet）
Website Planetの『ファビコン作成ツール』は、日本語の画面で使えるオンラインのファビコン作成ツールです。
JPG・PNG・GIF形式の画像（最大5MB）をアップロードするか、サイト内の無料ギャラリーからアイコンを選んでファビコンを作成できます。作成したファビコンはPNG形式でダウンロードできます。
ファビコン無料素材サイト8選
ファビコンをわざわざ作るのが面倒という方へ、すでに完成したファビコンを無料でダウンロードできるWebサイトを8個集めました。
23. Icons8
150万個以上のアイコンがあつまるサイト。
多くのアイコンのなかでファビコンは少なめですが、気にいったアイコンを見つけたら、ファビコン作成ツールで簡単にファビコンにすることができます。
24. Free Favicon
ファビコンギャラリーと作成ツールが一緒になったファビコンサイト。
ファビコンギャラリーでは、動物、ビジネス、国旗などジャンル分けがされていて、探したいファビコンを見つけやすくなっています。
25. ファビコンギャラリー.com
『ファビコンギャラリー.com』は、ファビコンのギャラリーサイトです。
11色のカラーと、「暮らし」「食品」などの20のカテゴリーからサーチできるので、ファビコンを探しやすいのが特徴です。
26. Favicon Generator
ファビコン作成機能をあわせもつ、ファビコンギャラリーサイト。
アルファベットと色を選び、キーワードを入力すると、ファビコンがヒットする仕組みです。
作成機能も、画像をアップロードしてファビコンの.ico形式にするだけなので、とても簡単です。
27. ICOOON MONO
『ICOOON MONO』は、6,000個以上のモノクロアイコンを無料で配布している日本のサイトです。
ダウンロード時に16px・32pxなどのサイズと、PNG・JPG・SVGの形式を選べるため、ファビコン用の小さなアイコンも用意できます。商用利用ができ、クレジット表記は不要です。
28. Google Fonts（Material Symbols）
『Material Symbols』は、Googleが公開しているアイコンセットで、Google Fontsのサイトで検索・ダウンロードできます。
2,500種類以上のアイコンがあり、塗りや線の太さなどを調整してからSVGやPNGでダウンロードできます。
Google Fonts（Material Symbols）
29. OpenMoji
『OpenMoji』は、デザイナーや開発者向けに公開されているオープンソースの絵文字セットです。
4,000種類以上の絵文字がSVGとPNG（72×72px・618×618px）で配布されており、CC BY-SA 4.0ライセンスで利用できます。
30. Tabler Icons
『Tabler Icons』は、6,200点以上のアイコンを無料で配布しているオープンソースのアイコンセットです。
線で描かれたOutlineと塗りつぶしのFilledのスタイルがあり、SVGでダウンロードできます。MITライセンスで公開されています。
まとめ
初心者でも簡単にファビコンをデザインできる作成ツールや、ダウンロードするだけでおしゃれなファビコンが手に入る無料素材サイトなど、ファビコンを作ったりダウンロードしたりできるWebサイトはたくさんあります。
ぜひ、お気に入りの素材やツールを見つけて、ファビコンをWebサイトに設置するときの参考にしてください。
こちらもおすすめ！▼
【商用OK/無料】シンプル＆おしゃれ！フリーアイコン素材サイト30選
Workship MAGAZINE
ロゴデザインの作り方。ブランディングに欠かせない12の考え方とは？
Workship MAGAZINE
無料で使えるボタン画像フリー素材集30選【商用利用可】
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【週3日以上/リモートワークOK】 Figmaで制作する管理画面デザインを担うUIデザイナーを急募！
- #副業OK
- #スタートアップ
- #土日週末OK
- #長期案件
- #フルリモートOK
職種：デザイナー
時給：2,000円 〜 4,000円
働き方：リモートのみ
エリア：東京都
Workship MAGAZINE編集部 創設・最古参メンバー。ITビジネス系、フリーランス系の記事を担当。
