Favicon(ファビコン)は、ブラウザのタブやブックマーク、検索履歴に表示されるアイコンです。複数のタブを開いてウェブサイトを閲覧している時や、ブックマークが多数ある場合に、サイトの判別に役立ちます。ブランドの「顔」としての役割も果たすため、ホームページやECサイト作成の際には、忘れずにファビコンを設置しましょう。
ここでは、ファビコンを簡単に作れる無料のツールやサイト、ファビコンの設定方法を解説します。
ファビコンの作成ツール7選
1. Faviconジェネレーター
Faviconジェネレーターは、ブラウザ上で利用でき、画像ファイルからファビコンを作成できるツールです。.jpg(.jpeg)や.png、.gifなどの画像ファイルを基に、拡張子が.icoのファビコン用画像を作成してくれます。ファビコン用画像はその場でプレビュー表示できます。また、ファビコンのサイズは16 × 16pxから256 × 256pxまでの7種類の中から選べます。
サイズを同時に複数選択することも可能です。その場合、選択したサイズのアイコン画像を1つのファイルにまとめたマルチアイコンが作成されます。
2. Dupli Checker(デュプリチェッカー)のファビコン作成
Dupli Checker(デュプリチェッカー)の「ファビコン作成」は、.ico形式と.png形式のファビコンが作れて、ダウンロード可能サイズが豊富な無料ツールです。.jpg(.jpeg)や.png、.gifなどの拡張子の画像ファイルからブラウザ上でファビコンを作れます。画像ファイルをアップロードすると、数秒でプレビューが表示されます。ダウンロード可能なサイズは16 × 16pxから180 × 180pxまでの12種類です。作成されるファビコンは.ico形式と.png形式の2種類で、希望サイズを複数選択した場合は、選択したサイズのファビコンがそれぞれ.ico形式と.png形式で書き出されます。
3. Favicon.cc
Favicon.ccは、ファビコンをロゴ画像から作成するだけでなく、ゼロからデザインすることもできるツールです。ゼロからファビコンを作成する場合は、画面右側に表示されるカラーパレットから使用したい色を選択し、中央に表示されているマス目の中に色を入れていきます。他のユーザーが作成したファビコンを見られる機能もついているため、ファビコン作成に悩んだ時にも参考になります。
4. 無料!ファビコンfavicon.ico簡単作成
無料!ファビコンfavicon.ico簡単作成は、画像をアップロードして [favicon.ico作成] ボタンを押すだけでファビコンが作れる、使いやすさが魅力の無料ツールです。あらかじめファビコン用に画像を用意する必要がありますが、画像が手元にあればそのファイルをアップロードするだけでファビコンを作成できます。このツールでは、16 × 16px、24 × 24px、32 × 32px、48 × 48px、64 × 64pxの5サイズのファビコンが、.ico形式で一度に自動作成されます。
5. TAFtools(タフツール)のfaviconジェネレータ
TAFtools(タフツール)のfaviconジェネレータは、SEO対策ツールやウェブ管理ツールなどの無料ツールを提供している企業のファビコン無料作成ツールです。用意した画像からファビコンが作れます。まず希望のファビコンサイズを選択し、ファビコンにする画像をアップロードします。作成されると、選択したサイズのファビコンが表示され、.ico形式のファイルがダウンロードできます。対応しているファビコンサイズは16 × 16px、24 × 24px、32 × 32px、48 × 48px、64 × 64pxです。
6. ファビコンfavicon.ico作成リアルタイム版
ファビコンfavicon.ico作成リアルタイム版は、シンプルなインターフェイスで直感的に操作できるファビコン作成ツールです。対応サイズは16 × 16px、32 × 32px、48 × 48pxの3種類のみですが、複数サイズを選択するとマルチアイコンの作成ができます。
7. Canva(キャンバ)
Canva(キャンバ)は、無料でファビコンをデザインしたい人におすすめのツールです。「ロゴ」というキーワードを検索窓に入力し、表示されたさまざまなロゴテンプレートから使いたいものを選ぶことで、ファビコンをデザインできます。テンプレートではなくデザインの素材を白紙のページに追加し、編集してファビコンを作成することもできます。無料プランの場合は.jpg(.jpeg)や.png、.pdf、.gifなどの形式でのダウンロードとなるため、その後、別のファビコン作成ツールを利用して拡張子を.icoに変更する必要があります。ブログサービスやCMS(コンテンツマネジメントシステム)を使ってウェブサイトを作る場合、使用するサービスによっては、.pngや.jpg(.jpeg)形式のままアップロードすると自動でファビコン用画像を作成してくれるものもあります。
これらのファビコン作成ツールを利用すれば、画像をアップロードするだけで必要なファビコンファイルを用意することができます。なお、用意したファビコンを表示させるためには、ウェブサイトやECサイト上で設定を完了させる必要があります。
Favicon (ファビコン) とは
Favicon(ファビコン)とは、ウェブサイトのシンボルとして使用されるアイコンのことで、Favorite iconを略したものです。ファビコンが表示される場所は、主に以下のとおりです。
- Google(グーグル)やMicrosoft Edge(マイクロソフトエッジ)、Firefox(ファイヤーフォックス)などのウェブブラウザのタブ上
- ウェブブラウザのホーム画面
- ウェブブラウザの「ブックマーク」や「お気に入り」
- ウェブブラウザの検索結果画面
- WhatsAppなど一部の会話アプリでウェブサイトのリンクを送信した場合のメッセージ画面
また、ファビコンは表示する場所によって推奨される画像サイズが異なります。ウェブブラウザのタブで使用されるサイズは16 × 16pxですが、ブックマークやスマホのホーム画面など、表示される場所によって推奨サイズが異なります。
- ウェブブラウザのタブ上:16 × 16px
- ブックマーク:32 × 32px
- iOSのホーム画面:180 × 180px
- Androidのホーム画面:256 × 256px
ファビコンの作成方法
1. ファビコンに使う画像ファイルを用意する
最初に、ファビコンに使う画像を用意します。画像を用意する際には、以下の点に注意するとよいでしょう。
シンプルで目立つデザインにする
ファビコンは表示サイズが小さいという特徴があります。複雑なデザインや多くの色を使用したデザインのファビコンは、ひと目で判別がしにくいため、おすすめしません。ブラウザのタブ上で表示される16 × 16pxのサイズでもわかりやすいように、シンプルなデザインで、可能であれば目立つ配色の画像を用意しましょう。
ロゴと関連のあるデザインを採用する
ファビコンは、ウェブサイトのシンボルマークとしての機能も持っています。ユーザーがサイト名を覚えていない場合でも、ロゴやファビコンは何となく覚えているケースがあります。ロゴマークをそのまま使うことももちろん可能ですが、ロゴマークが複雑な場合には、簡易化したデザインのファビコンを用意しましょう。また、ロゴ制作の際には、ロゴ画像がそのままファビコンに使えるかどうかを検討し、使えない場合にはファビコン用の画像も作成しておくことをおすすめします。
画質の良い画像を用意する
ファビコンはパソコンのウェブブラウザやブックマーク上では表示サイズが小さい特徴があります。画質の悪い画像を使用すると、ファビコンがぼやけることにもつながります。またスマホやタブレットの場合、パソコンに比べて大きなサイズで表示されます。このため、ファビコン作成ツールで使用する画像は画質が良いものを使用することをおすすめします。
余白を確保する
スマホのショートカットで表示されるファビコンは、正方形の四隅が角丸で表示されます。ファビコンは、四隅のギリギリまで使ったデザインの場合、表示された際に一部が欠ける可能性があります。使用する画像には余白を入れておきましょう。
2. 画像ファイルを適切なサイズ、拡張子のファイルに変換する
Shopifyストアでファビコンを使うには、16 × 16pxまたは32 × 32pxのサイズのファビコン画像の使用が推奨されています。使用できる代表的な拡張子は.ico、.png、.jpg(.jpeg)です。WordPressでファビコンを使う場合は、512 × 512pxサイズ以上の画像が推奨されています。
3. ファビコンをウェブサイトに追加する
用意したファビコンをウェブサイトに追加します。追加の方法は、使用するウェブサイトビルダーやECサイトビルダーにより異なります。これからウェブサイトを作成する予定の人は、ホームページの作り方や売れるECサイトのデザインの記事も参考にしてみてください。
Shopifyストアのファビコン変更・設定方法
Shopifyストアのファビコン変更・設定は、ベーシックプラン以上をご利用の場合のみに利用できるオプションです。スタータープランでは利用できないため注意しましょう。設定の手順は以下のとおりです。
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけ、[カスタマイズする] をクリックします。
- 歯車アイコンをクリックし [テーマ設定] ページにアクセスします。
- テーマのバージョンに応じて [ロゴ] または [ファビコン] をクリックします。
- ファビコン画像エリアで [画像を選択する] をクリックし、以下のいずれかの操作を行います。
- すでにアップロード済みの画像を選択する場合は [ストアライブラリー] タブをクリックします。
- ローカルコンピューターから画像を選択する場合は [画像を追加] をクリックします。
- [完了] をクリックします。
- ファビコン画像に代替テキストを追加する場合、さらに以下の手順を行ってください。
- [編集] をクリックします。
- [プレビューと編集] ウインドウで、[代替テキスト] フィールドに画像の説明を簡潔に入力します。
- [保存] をクリックします。
- [保存] をクリックします。
ファビコンを設置するメリット3つ
1. 認知度向上につながる
ファビコンは、タブ上の見える位置に配置されているため、ウェブサイトの認知度向上につながります。ファビコンは、アイコン自体は小さいものの目立つため、ウェブサイトの目印として機能します。そのため、ウェブサイトのタイトルを覚えていないユーザーにも、ファビコンでウェブサイトの内容を認識してもらえる可能性があります。
2. ブランディング効果が期待できる
ファビコンは、ウェブサイトの「顔」として認識されているため、ユーザーはファビコンとウェブサイトを結び付けて記憶しています。さらに、ロゴマークで使用する図形やデザイン、配色をファビコンにも活用することで統一感が生まれ、ブランディング効果が期待できます。
3. リピーター獲得につながる
ウェブサイトにファビコンが設置されていないと、「作成途中かもしれない」「ファビコンの設定などの細かい部分まで気にしていないのかもしれない」という印象をユーザーに持たれてしまうかもしれません。一方、イメージに合ったファビコンをウェブサイトに設置することで、信頼できるウェブサイトであるという印象を打ち出すことができます。それにより、サイトへの再訪問が期待でき、リピーター獲得にもつながります。
まとめ
ファビコンは、作成ツールを使うことで簡単にできます。こうしたツールは無料で使えるものも多数あるため、初心者でも簡単に用意ができます。
ファビコンに使う画像を用意する場合には、自社のイメージに合ったシンプルで目立つデザインを心がけると、ブランディング効果も期待できます。サイトビルダーなどを使ってサイトを構築している場合は、画像をアップロードするだけでファビコンが設置できますので、ぜひ実践してみてください。
続きを読む
- Shopifyのテンプレート言語 Liquidの概要
- 【保存版】Shopifyで使える決済サービスをご紹介
- Liquidを使用してカスタムランディングページのテンプレートを作成する方法
- TikTokでバズる時間とは?ベストタイミングを狙おう!
- アメリカ流の自宅オフィスのアイディア:仕事の生産性を上げる方法を紹介
- ハンバーガー屋のオンラインストア開業ガイド
- 副収入を得よう!サイドビジネスで稼ぐクリエイティブな10の方法
- サロンボードとは? サロン運営専用の予約・顧客管理システム
- Twitch用オリジナルグッズを作る方法:ライブ配信をレベルアップさせよう
- 音楽でお金を稼ぐには? ミュージシャンのためのマネタイズ方法6選
ファビコンについてよくある質問
Shopifyでファビコンを設定する方法は?
Shopifyでファビコンを設定するには、管理画面から [オンラインストア] > [テーマ] に移動し、編集するテーマを見つけて [カスタマイズする] をクリックします。その後、歯車アイコンをクリックして [テーマ設定] ページにアクセスし、テーマのバージョンに応じて [ロゴ] または [ファビコン] をクリックします。ファビコン画像エリアで [画像を選択する] をクリックしてアップロード済みの画像を選択、またはローカルコンピューターから画像を追加します。
Shopifyでファビコンを変更・設定できるのは、ベーシックプラン以上をご利用の場合のみとなります。
ファビコンの作成方法は?
ファビコンは、ファビコンに使用したい画像を用意し、ファビコン作成ツールなどを使って.icoや.pngなどの拡張子に変換することで作ることができます。
ファビコンは無料で作成できる?
ファビコンは無料で作成できます。ファビコンの無料作成ツールや作成サイトの利用をおすすめします。
文:Masumi Murakami