ファビコン作成ツール6選：無料ツールや作成サイトをご紹介

ファビコン（Favicon）は、ブラウザのタブやブックマーク、検索履歴に表示されるアイコンです。複数のタブを開いてウェブサイトを閲覧している時や、ブックマークが多数ある場合に、サイトの判別に役立ちます。

ブランドの「顔」としての役割も果たすため、ホームページやECサイト作成の際には、忘れずにファビコンを設置しましょう。

この記事では、ファビコンを簡単に作れる無料のツールやサイト、ファビコンの設定方法を解説します。

ファビコンの作成ツール6選

1. Faviconジェネレーター
2. Dupli Checker（デュプリチェッカー）のファビコン作成
3. Favicon.cc
4. TAFtools（タフツール）のfaviconジェネレータ
5. ファビコンfavicon.ico作成リアルタイム版
6. Canva（キャンバ）

1. Faviconジェネレーター

Faviconジェネレーターは、ブラウザ上で利用でき、画像ファイルからファビコンを作成できるツールです。.jpg（.jpeg）や.png、.gifなどの画像ファイルを基に、拡張子が.icoのファビコン用画像を作成してくれます。ファビコン用画像はその場でプレビュー表示できます。また、ファビコンのサイズは16 × 16pxから256 × 256pxまでの7種類の中から選べます。

サイズを同時に複数選択することも可能です。その場合、選択したサイズのアイコン画像を1つのファイルにまとめたマルチアイコンが作成されます。

2. Dupli Checker（デュプリチェッカー）のファビコン作成

Dupli Checker（デュプリチェッカー）の「ファビコン作成」は、.ico形式や.png形式のファビコンを作成でき、ダウンロード可能なサイズが豊富な無料ツールです。.jpgや.png、.gifなどの画像ファイルからブラウザ上でファビコンを作れます。画像ファイルをアップロードすると、プレビューが表示されます。作成時には16 × 16pxから180 × 180pxまでの12種類のサイズから選択できます。

3. Favicon.cc

Favicon.cc（英語）は、ファビコンをロゴ画像から作成するだけでなく、ゼロからデザインすることもできるツールです。ゼロからファビコンを作成する場合は、画面右側に表示されるカラーパレットから使用したい色を選択し、中央に表示されているマス目の中に色を入れていきます。他のユーザーが作成したファビコンを見られる機能もついているため、ファビコン作成に悩んだ時にも参考になります。

4. TAFtools（タフツール）のfaviconジェネレータ

TAFtools（タフツール）のfaviconジェネレータは、SEO対策ツールやウェブ管理ツールなどの無料ツールを提供しているTAFtoolsのファビコン作成ツールです。用意した画像からファビコンが作れます。まず希望のファビコンサイズを選択し、ファビコンにする画像をアップロードします。作成されると、選択したサイズのファビコンが表示され、.ico形式のファイルがダウンロードできます。対応しているファビコンサイズは16 × 16px、24 × 24px、32 × 32px、48 × 48px、64 × 64pxです。

5. ファビコンfavicon.ico作成リアルタイム版

ファビコンfavicon.ico作成リアルタイム版は、シンプルなインターフェイスで直感的に操作できるファビコン作成ツールです。対応サイズは16 × 16px、24 × 24px、32 × 32px、48 × 48px、64 × 64pxの5種類で、複数サイズを指定するとマルチアイコンを作成できます。

6. Canva（キャンバ）

Canva（キャンバ）は、無料でファビコンをデザインしたい人におすすめのツールです。「ロゴ」というキーワードを検索窓に入力し、表示されたさまざまなロゴテンプレートから使いたいものを選ぶことで、ファビコンをデザインできます。テンプレートではなくデザインの素材を白紙のページに追加し、編集してファビコンを作成することもできます。

無料プランでも.jpgや.png、.pdf、.gifなどの形式でダウンロードできます。ファビコンに.ico形式が必要な場合は、別のファビコン作成ツールを利用して変換できます。ブログサービスやCMS（コンテンツマネジメントシステム）を使ってウェブサイトを作る場合は、使用するサービスが対応しているファビコンのファイル形式を確認しましょう。

これらのファビコン作成ツールを利用すれば、画像をアップロードするだけで必要なファビコンファイルを用意することができます。なお、用意したファビコンを表示させるためには、ウェブサイトやECサイト上で設定を完了させる必要があります。

Favicon (ファビコン) とは

ファビコン（Favicon）とは、ウェブサイトのシンボルとして使用されるアイコンのことで、Favorite iconを略したものです。ファビコンが表示される場所は、主に以下のとおりです。

• Google ChromeやSafari、Microsoft Edgeなどのウェブブラウザのタブ上
• ウェブブラウザのホーム画面
• ウェブブラウザの「ブックマーク」や「お気に入り」
• ウェブブラウザの検索結果画面
• 一部のメッセージアプリでウェブサイトのリンクを送信した場合のメッセージ画面

ファビコンは、表示される場所やデバイスによって適した画像サイズが異なります。ウェブブラウザのタブでは小さなサイズで表示されますが、ブックマークやスマホのホーム画面などでは、より大きな画像が使用される場合があります。そのため、用途に応じたサイズの画像を用意することが大切です。

ファビコンの作成方法

1. ファビコンに使う画像ファイルを用意する
2. 画像ファイルを適切なサイズに調整する
3. ファビコンをウェブサイトに追加する

1. ファビコンに使う画像ファイルを用意する

最初に、ファビコンに使う画像を用意します。画像を用意する際には、以下の点に注意するとよいでしょう。

シンプルで目立つデザインにする

ファビコンは小さく表示されることが多いという特徴があります。複雑なデザインや多くの色を使用したデザインのファビコンは、ひと目で判別しにくいため、おすすめしません。小さなサイズで表示されてもわかりやすいように、シンプルなデザインで、可能であれば目立つ配色の画像を用意しましょう。

ロゴと関連のあるデザインを採用する

ファビコンは、ウェブサイトのシンボルマークとしての機能も持っています。ユーザーがサイト名を覚えていない場合でも、ロゴやファビコンのデザインを覚えていることがあります。

ロゴマークをそのまま使うことももちろん可能ですが、ロゴマークが複雑な場合には、簡易化したデザインのファビコンを用意しましょう。また、ロゴ制作の際には、ロゴ画像がそのままファビコンに使えるかどうかを検討し、使えない場合にはファビコン用の画像も作成しておくことをおすすめします。

画質の良い画像を用意する

ファビコンは表示される場所やデバイスによってサイズが異なります。画質の悪い画像を使用すると、表示環境によってはファビコンがぼやけることがあります。このため、ファビコン作成ツールで使用する画像は、十分な解像度のものを使用することをおすすめします。

余白を確保する

スマホのホーム画面などでは、アイコンが角丸などの形状で表示される場合があります。画像の四隅まで重要なデザイン要素を配置すると、表示環境によっては一部が見切れる可能性があります。重要なデザイン要素は中央寄りに配置し、周囲に十分な余白を確保しておきましょう。

2. 画像ファイルを適切なサイズに調整する

Shopifyストアでファビコンを使うには、16 × 16pxまたは32 × 32pxのサイズのファビコン画像の使用が推奨されています。使用できる代表的な拡張子は.ico、.png、.jpgです。WordPressでファビコンを使う場合は、512 × 512pxサイズ以上の画像が推奨されています。

3. ファビコンをウェブサイトに追加する

用意したファビコンをウェブサイトに追加します。追加の方法は、使用するウェブサイトビルダーやECサイトビルダーによって異なります。これからウェブサイトを作成する予定の方は、Webサイトの作り方や売れるECサイトのデザインの記事も参考にしてみてください。

Shopifyストアのファビコン変更・設定方法

Shopifyストアのファビコン変更・設定は、Basicプラン以上をご利用の場合に利用できるオプションです。設定の手順は以下のとおりです。

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. ファビコンを追加するテーマを見つけ、[テーマを編集] をクリックします。
3. 歯車アイコンをクリックし、[テーマ設定] にアクセスします。
4. テーマのバージョンに応じて [ロゴ] または [ファビコン] をクリックします。
5. [ファビコン画像] セクションで [画像を選択] をクリックし、以下のいずれかの操作を行います。
   1. すでにアップロード済みの画像を選択する場合は、画像を検索または見つけ、チェックボックスで画像を選択します。
   2. ローカルコンピューターから画像を選択する場合は、[画像を追加] をクリックして画像を開き、チェックボックスで画像を選択します。
6. [完了] をクリックします。
7. [保存] をクリックします。

テーマによっては、ファビコン画像に代替テキストを追加できます。追加する場合は、以下の手順を行ってください。

1. [ファビコン画像] セクションで [編集] をクリックします。
2. [プレビューと編集] ダイアログの [代替テキスト] フィールドに、画像の説明を簡潔に入力します。
3. [保存] をクリックします。

詳しくは、Shopifyヘルプセンターの「ストアにファビコンを追加する」をご覧ください。

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

1. 認知度向上につながる
2. ブランディング効果が期待できる
3. リピーター獲得に役立つ

1. 認知度向上につながる

ファビコンは、タブ上の見える位置に配置されているため、ウェブサイトの認知度向上につながります。ファビコン自体は小さいものの目立つため、ウェブサイトの目印として機能します。そのため、ウェブサイトのタイトルを覚えていないユーザーにも、ファビコンでウェブサイトを認識してもらえる可能性があります。

2. ブランディング効果が期待できる

ファビコンは、ウェブサイトの「顔」としての役割を果たします。ロゴマークで使用する図形やデザイン、配色をファビコンにも活用することで統一感が生まれ、ブランドを認識してもらいやすくなります。

3. リピーター獲得に役立つ

ウェブサイトにファビコンが設置されていないと、サイトの作成が完了していないという印象をユーザーに持たれてしまうかもしれません。一方、イメージに合ったファビコンをウェブサイトに設置することで、信頼できるウェブサイトであるという印象を打ち出すことができます。それにより、サイトへの再訪問が期待でき、リピーター獲得にも役立ちます。

まとめ

ファビコンは、作成ツールを使うことで簡単にできます。こうしたツールは無料で使えるものも多数あるため、初心者でも簡単に用意ができます。

ファビコンに使う画像を用意する場合には、自社のイメージに合ったシンプルで目立つデザインを心がけると、ブランディング効果も期待できます。サイトビルダーなどを使ってサイトを構築している場合は、用意した画像をアップロードしてファビコンを設定できる場合も多いため、ぜひ実践してみてください。