エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
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は、簡単にオリジナルのファビコンを作成できるWebサイトです。左下の「Create Amazing Icons!」ボタンをクリックすると、ファビコン作成画面が現れます。
PCや矢印、ライン、動物などの基本のテンプレートの中から、作りたいファビコンのベースを選んで編集していきます。基本形がすでに出来上がっているので、初心者でも簡単にファビコンを作成できます。
2. favicon.icoを作ろう！
favicon.icoを作ろう！は、画像をアップロードするだけで、ファビコン形式（.ico）のファイルに変換してくれるファビコン作成ツールです。PNG、JPG、GIF形式のファイルをアップロードすると、ファビコンの形式に変換されます。
すでにファビコンにしたい画像素材を持っている方におすすめのサイトです。
3. iconifier.net
iconifier.netは、最大で500KBの画像をアップロードできるファビコン作成ツールです。JPEG、PNG、GIFのファイルをアップロードすると、ファビコン形式に変換してくれます。
16×16pxをはじめ、7種類のサイズのファビコンを作成できます。
4. Favicon Generator
Favicon Generatorは、文字や背景の色、テキストを入力してファビコンを作成するツールです。
特定の文字が入ったファビコンを作りたい方におすすめです。
5. Favicon Icon Drawing Program Online Free
右の一覧からカラーを選択して、ひとつひとつのフレームに色を入れていくファビコン作成ツール。
画面全体がすっきりしているので、余計なことを考えずにファビコン作りに集中できます。
Favicon Icon Drawing Program Online Free
6. favicon.cc
Webサイト上でファビコンを作成できるツールです。
カラーパレットから色を選び、ひとつひとつ塗りつぶしていきます。
デザインが直感的で見やすく、簡単にファビコンを作成できます。
7. FavIcon Generator
画像のファイルを選択するだけで、faviconを作成できるツールです。
生成された（favicon.ico）のファイルをWebサイトにアップして、
<link rel = “shortcut icon” type = “image / x-icon” href = “/ favicon.ico”>
というコードを書くだけで簡単にファビコンを導入できます。
8. Dynamic Drive Favicon Editor（bata）
オリジナルのファビコンを作成するツールです。
16×16のPNGアイコンを作成したり、既存のPNG画像をアップロードして編集できます。
Dynamic Drive Favicon Editor（beta）
9. Genfavicon.com
オンラインのファビコン作成ツール。
画像をリサイズし、.icoのフォーマットで保存することで、画像ファイルをファビコンに変換できます。
ダウンロード前に、プレビューでファビコンを確認できるので、便利です。
10. Rreal favicon generator
画像をファビコン形式に変換するツールです。
また、自身のWebサイトで既にファビコンを使っている場合、それが本当に良いファビコンかどうか、チェックする機能もついています。
11. X-Icon Editor
ファビコンをいちからデザインできるファビコン作成ツール。
ブラシ、鉛筆、消しゴムでデザインする、とてもシンプルな仕組みです。
フレームが大きいので、見やすくデザインしやすいのが特徴です。
12. Faviconit
既存の画像ファイルをファビコン形式にするファビコン作成ツール。
ファイルを選んでボタンを押すだけで、簡単にファビコンが作れます。
13. Webstools
自身でデザインしてオリジナルのファビコンを作成できるツール。
16×16か32×32のサイズで作成できます。
Webサイトがシンプルで見やすく、作業しやすいのが特徴です。
14. favic-o-matic
『Favic-o-Matic』は、.icoと.png両方のファビコンを無料で作成するツールです。
また、既存のファビコンのデザインをチェックする機能もついています。
15. Favicon.pro
画像をアップロードするだけでファビコンを簡単に作成できるツール。
JPG、GIF、PNG形式のファイルを.ico形式に変換できます。
また、ファビコンは、16×16、32×32、48×48、64×64、128×128のサイズで作成できます。
16. faviconr
コンピュータ上の画像からファビコンを生成するシンプルなファビコン作成ツールです。
JPG、PNG、およびGIF形式のファイルを利用できます。
17. DeGraeve.com
画像をファビコン形式へ変換できる作成ツールです。
トップでは、カラフルなりんごを形成しているフレームをクリックするだけで、色を変えることができます。編集機能があまりついていないので、とてもシンプル操作しやすいのが特徴です。
18. favicon.by
オリジナルファビコンを簡単に作れるファビコン作成ツール。
鉛筆や消しゴム等の編集機能がすっきり整理されていて使いやすいのが特徴です。
19. RealWorld Graphics
オンラインのファビコン作成ツール。
鉛筆やライン、塗りつぶしなど、多彩なパレットののなかから選んで作成するので、オリジナルのファビコンを作成できる。
20. Junior Icon Editor
無料のアイコン・ファビコン作成ツール。
Windows 8,7、Vista、XP、2003,2000、ME、98,95、NT、iOS、Linux、Android、Webなどの複数のプラットフォームで利用できます。
ダウンロードして使うので、細かい調節が可能です。
21. IconFXポータブル
ファビコン・アイコンを作成するためのフリーウェア。
インストールが必要な本格的なアイコン・ファビコンジェネレーターです。
40以上のエフェクトとカスタムフィルタがついているので、こだわりを持って作成したい方におすすめです。
22. prodraw.net
『Prodraw』は、JPG、JPEG、PNG、GIF、BMP、TIF、TIFF形式を利用できる無料のファビコンジェネレーター。対応形式の多さが魅力です。
サイズの範囲は、最小の16×16サイズから128×128pサイズまで、幅広く対応しています。
ファビコン無料素材サイト8選
ファビコンをわざわざ作るのが面倒という方へ、すでに完成したファビコンを無料でダウンロードできるWebサイトを8個集めました。
23. Icons8
58,100個の無料フラットアイコンがあつまるサイト。
多くのアイコンのなかでファビコンは少なめですが、気にいったアイコンを見つけたら、ファビコン作成ツールで簡単にファビコンにすることができます。
24. ICONFINDER
ファビコン・アイコンを幅広く取り扱うWebサイト。ファビコンは一部有料です。
『ICONFINDER』は通常のファビコンギャラリーと違って、デザイナーが作った独自のアイコン素材を見て、そこからデザイナーにオファーできます。
25. IconJ
『IconJ』は、ファビコンのギャラリーサイトです。
3,000種類以上のファビコンを幅広いジャンルで取り揃えています。
ファビコンのコードをコピーできるので、Webサイトに表示するのがとても簡単です。
26. Free Favicon
ファビコンギャラリーと作成ツールが一緒になったファビコンサイト。
ファビコンギャラリーでは、動物、ビジネス、国旗などジャンル分けがされていて、探したいファビコンを見つけやすくなっています。
27. Re:vre
『Re:vre』は、ナチュラル・シンプル・キュートをテーマに、かわいらしいデザインの素材を無料で配布しているWebサイトです。
カラフルなハートやお花、宝石をモチーフにしたファビコンが掲載されています。
28. ファビコンギャラリー.com
『ファビコンギャラリー.com』は、ファビコンのギャラリーサイトです。
11色のカラーと、「暮らし」「食品」などの20のカテゴリーからサーチできるので、ファビコンを探しやすいのが特徴です。
29. Favicon Generator
ファビコン作成機能をあわせもつ、ファビコンギャラリーサイト。
アルファベットと色を選び、キーワードを入力すると、ファビコンがヒットする仕組みです。
作成機能も、画像をアップロードしてファビコンの.ico形式にするだけなので、とても簡単です。
30. かに沢のりおのいろいろサイト
フリーランスのイラストレーターの方が、自身のイラストやファビコン、動画素材を掲載しているサイト。
ドット絵のファビコン素材を無料で配布しています。バラやハンバーガーなど可愛らしい素材が多めです。
まとめ
初心者でも簡単にファビコンをデザインできる作成ツールや、ダウンロードするだけでおしゃれなファビコンが手に入る無料素材サイトなど、ファビコンを作ったりダウンロードしたりできるWebサイトはたくさんあります。
ぜひ、お気に入りの素材やツールを見つけて、ファビコンをWebサイトに設置するときの参考にしてください。
こちらもおすすめ！▼
【商用OK/無料】シンプル＆おしゃれ！フリーアイコン素材サイト25選
Workship MAGAZINE
ロゴデザインの作り方。ブランディングに欠かせない12の考え方とは？
Workship MAGAZINE
無料で使えるボタン画像フリー素材集30選【商用利用可】
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Workship MAGAZINE編集部 創設・最古参メンバー。ITビジネス系、フリーランス系の記事を担当。
