Skip to content
イノーバマーケティングチーム2024/02/05 11:21:472 min read

自社オリジナルのWebサイト用アイコン「ファビコン(favicon)」をつくろう|作成ツール・素材サイトをご紹介

お気に入りにサイトを登録した際に、登録サイト名の左側やタブに小さなアイコンが表示されるのをみたことはありますか?
表示されるのは、目立たない小さなアイコンですが、サイトのブランディングやユーザビリティの向上に影響を与えるといわれています。

この記事では、ホームページのアイコンの有無が与える影響とその効果、アイコン制作で使える便利なツールや素材サイトを紹介します。

ホームページのアイコンとは?

ブラウザーのURL先頭部分やタブ部分、お気に入りにサイトを登録した際などに表示されるアイコンでファビコンともいいます。名前の由来は、お気に入り(favorite)のアイコン(icon)を意味する”favorite icon”で短縮されて、favicon(ファビコン)になりました。

図1.png

他にもPC版Chromeトップページ(新しいタブ)の検索バー下の閲覧履歴やショートカット、スマホやiPhoneの検索結果表示でも表示されます。

図2.png

参照 Google | A new look for Google Search

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

ファビコンの有無が与える影響とその効果には、どのようなものがあるのでしょうか?
ファビコンがあるサイトは、ないサイトに比べてきちんとしたサイトの印象を受けます。また、設置されているサイトは直感的にコンテンツ内容をイメージしてもらいやすいです。一目でサイトを分別する目印になるので、ホームページのブランディングやユーザビリティの向上に役立ちます

WordPressは、世界と日本で高いシェアを誇るCMSで、個人ブログだけでなく企業サイトにも利用されています。
WordPressのバージョン5.4以降では、ファビコンの設定をしていないサイトは自動的にWマークのWordPressデフォルトアイコンが表示されるようになりました。5.4以降にアップグレードして気がつかないまま、デフォルトアイコンが表示されている企業サイトも多いのではないでしょうか。
 
実際、デフォルトアイコンをそのまま使っている企業サイトも見受けられますが、Wマークと企業サイトの内容が結びつかないだけでなく、企業に対する印象も非常に悪くしてしまっています。

他にもファビコンがあるサイトは、サイト訪問者がサイトをお気に入りやChromeトップページのショーットカットに登録した際、サイトを覚えてもらったり、見つけてもらいやすくなります。そのため、リピーター対策に有利です。

ファビコンを作成する際の注意点

ファビコン作成時の注意点として、大きく分けてサイズとファイル形式についての2点があります。

ファビコンの一般的なサイズは「16×16(px)」ですが、ユーザーの利用するデバイスやブラウザそれぞれに以下のような適当なサイズがありますので一部ですが代表的なものをご紹介します。

  • 16×16

ChromeSafari各ブラウザのタブなど

  • 32×32

ブックマーク

  • 48×48

Windowsのホーム画面にあるサイトアイコン

  • 64×64

Windows高解像度のサイトアイコン

 

「最低限どのサイズがあれば良いのか?」、断言するのは少し難しいですが、複数のサイズを作成した場合にはそれらを一つのデータにまとめることができる「.ico形式」のファイルで保存するようにしましょう。ICO形式にすることによって、サーバー側で表示場所に適したサイズのファビコンを選ぶことができます。

また、WordPressバージョン4.3以降では512×512pxPNGファイルがあれば簡単にファビコンを設定することができるため、WordPressを利用している場合は複数のサイズを作成する必要はありません。

ファビコン制作ツール5選

ここでは、ファビコン制作に役立つ無料ツールを紹介します。
ファビコンのサイズやファイル形式は、表示される場所、ブラウザ、デバイス、CMS付属機能などにより異なり、ツールを使う前に確認が必要です。ファイル形式はICO形式が一般的で、複数のサイズのアイコンを一つのファイルに格納する”マルチアイコン”が可能です。

ファビコンfavicon.icoを作ろう!

図3.png

ファビコンの元になる画像から16×16、32×32、48×48ピクセルのファビコンがつくれます。元画像は別に用意する必要があります。サポートしている元画像のファイル形式は、PNG、GIF、JPG、BMPです。作りたいサイズを選択して、元画像を指定するとファビコンデータが生成されます。複数の大きさを指定すると、いくつかのアイコンが一つのファイルに格納された、マルチアイコンデータになります。

favicon.cc

図4.png

ドット絵の感覚でファビコンが、ブラウザ上で作れる作成ツールです。手持ちの画像をアップして編集したり、元画像がなくても真ん中にある描画スペースに絵を描いて作成できます。
アップロードできる元画像のファイル形式は、PNG、GIF、JPG、JPEG、BMP、ico、curMaxです。ファルサイズは最大サイズ5MBまで。
ファビコンの描画は、描画スペースの右にあるカラーピッカーから好きな色を選んで、ドット絵の感覚で描いていきます。アニメーションファビコンもつくれて、他のユーザが作成したファビコンのデザインも参考にチェックできます。

WEBSITE PLANET

図5.png

手持ちの画像もしくは、あらかじめ用意してあるアイコンギャラリーから、ファビコンがつくれます。
アップロードできる元画像のファイル形式は、PNG、GIF、JPGです。ファルサイズは最大サイズ5MBまで。生成できるファビコンのサイズは、ブラウザタブとブックマークで一般的に表示される16×16と、アンドロイドやIOS用などの全てのサイズ、元画像の寸法を保持したサイズになります。

Real favicon generator

図6.png

全てのブラウザやプラットフォームに対応したファビコンが、元画像から一括で変換できます。
アップロードできる元画像のファイル形式は、PNG、JPG、SVGです。ファルは、最小サイズで70×70ピクセルですが、最適な結果を得るには少なくても260x260ピクセル以上のサイズを推奨しています。
ファビコンの設置状況をチェックしてくれるサービス付きで便利です。トップページの「Check your favicon」に、ファビコンを設置したホームページのURLをいれると、結果が表示されます。

X-Icon Editor

図7.png

ブラウザ上で64×64、32×32、24×24、16×16ピクセルの4つのサイズのファビコンがつくれます。
ファビコンは、手持ちの画像をアップして編集したり、元画像がなくても描画スペースに絵を描いて作成できます。アップロードできる元画像のファイル形式は、PNG、GIF、JPG、BMP、icoです。複数の大きさを指定すると、いくつかのアイコンが一つのファイルに格納された、マルチアイコンデータになります。
 

アイコン素材サイト5選

ファビコンの元になる画像やロゴがない場合に使える無料素材サイトです。

ICOOON MONO

図8.png

商用利用可能なモノクロのアイコン素材が、ダウンロードできるサイトです。6000以上のアイコンがあります。
ダウンロードできるアイコンデータのサイズは、16・32・48・64・128・256・512ピクセルです。ファイル形式は、PNG、JPG、SVGになります。小さな画像にしても、絵柄がつぶれないベタ塗りのアイコンがファビコンに利用できそうです。

IFN

図9.png

商用可能なシンプルなモノクロアイコンがダウンロードできるサイトです。
ダウンロードできるアイコンのファイル形式は、SVG(一部未対応)、EPS、PNGです。デザインが明確でシンプルなものが多いので、ファビコンに利用しやすいです。アイコンの一つ一つには、コメントがついていて制作者の意図が伝わります。

DOTS DESIGN

図10.png

商用利用可能なドット絵のアイコン素材が、ダウンロードできるサイトです。10,000を超えるアイコンがあります。ダウンロードできるアイコンのファイル形式は、基本GIFです。一つのアイコンが色違いやサイズ違いでセットになっているので、自分で色を変える必要がなくイメージに近いものを選択できます。

Icon-rainbow

図11.png

商用利用可能なアイコン素材が、ダウンロードできるサイトです。
ダウンロードできるアイコンデータのサイズは、16・32・48・64・128・256・512ピクセルです。ファイル形式は、AI、SVG、PNG、JPG、EPSになります。アイコンはダウンロードする前に、11色の中から色を選んで変えられます。(※自由に色変えられるブラウザは、chromeとfirefoxのみ)

まとめ

ファビコンは、Webサイトのブランディングやユーザビリティ向上に欠かせない要素です。自社オリジナルのファビコンを作成することで、競合サイトとの差別化を図り、ユーザーに強い印象を残すことができます。

イノーバでは、ファビコンの作成だけでなく、Webサイト制作・運用に関する総合的なサポートを提供しています。Webサイトのパフォーマンス改善や集客力アップに役立つ無料資料も公開中です。ファビコンの設置からWebサイトの戦略的な活用まで、ぜひイノーバにご相談ください。

 

ぜひこちらの記事もお読みください:ホームページテンプレート・素材活用

ホームページテンプレートの選び方|おすすめのテンプレートとは?

CMSのデザインテンプレートとは?デザインにこだわるメリットと注意点を解説

ランディングページを作るならテンプレートの利用が効率的!提供サイトも多数ご紹介

 

Q1: ファビコンとは何ですか?

A1: ファビコンは、Webサイトのブラウザータブやブックマーク、検索結果などに表示される小さなアイコンです。サイトの識別やブランディングに役立ちます。

Q2: ファビコンを設置するメリットは何ですか?

A2: ファビコンを設置することで、サイトの印象が向上し、ブランディングやユーザビリティが強化されます。また、ユーザーがサイトを覚えてもらいやすくなり、リピーター獲得につながります。

Q3: ファビコンのサイズはどのように決めればいいですか?

A3: 一般的なファビコンのサイズは16×16pxですが、デバイスやブラウザによって最適なサイズが異なります。複数のサイズを用意し、ICO形式で保存することをおすすめします。

Q4: ファビコンを作成するための無料ツールはありますか?

A4: はい、様々な無料ツールがあります。例えば、favicon.cc、WEBSITE PLANET、Real favicon generator、X-Icon Editorなどが便利です。

Q5: ファビコンの素材はどこで入手できますか?

A5: 商用利用可能な無料のアイコン素材サイトがあります。ICOOON MONO、IFN、DOTS DESIGN、Icon-rainbowなどがおすすめです。

Q6: ファビコンを設置する際の注意点は何ですか? A6: ファビコンのサイズとファイル形式に注意しましょう。一般的にはICO形式が使われ、複数のサイズを一つのファイルにまとめることができます。また、ファビコンがサイトの内容と関連していることが大切です。

Q7: WordPressでファビコンを設定するには?

A7: WordPressの管理画面から、「外観」→「カスタマイズ」→「サイト基本情報」の順に進み、「サイトアイコン」の項目からファビコンをアップロードできます。

Q8: オリジナルのファビコンを作成する必要はありますか?

A8: 競合サイトとの差別化やブランディングの観点から、オリジナルのファビコンを作成することをおすすめします。素材サイトのアイコンをそのまま使うと、他サイトと似通ったデザインになってしまう可能性があります。

Q9: ファビコンの変更は頻繁に行うべきですか?

A9: ファビコンは、サイトの印象を決める重要な要素です。頻繁に変更するとユーザーが混乱する可能性があるため、慎重に検討し、必要な場合のみ変更するようにしましょう。

Q10: ファビコンの設置を確認する方法はありますか?

A10: ファビコンの設置状況は、ブラウザやデバイスごとに確認することをおすすめします。また、Real favicon generatorのような一括チェックツールを使うと便利です。

 

 

 

 

avatar

イノーバマーケティングチーム

株式会社イノーバの「イノーバマーケティングチーム」は、多様なバックグラウンドを持つメンバーにより編成されています。マーケティングの最前線で蓄積された知識と経験を生かし、読者に価値ある洞察と具体的な戦略を提供します。

関連記事

人気記事

2024/02/04 15:35:03

5W1Hとは?今すぐビジネスに活かせる3つの応用パターンを事例含めて徹底解説!

5W1Hの基礎知識と正しい使い方
Start Reading
2024/02/05 10:34:24

【コンテンツマーケティングの第一人者が解説】ブランディング完全ガイド - 基礎知識から事例、戦略立案まで徹底解説

ブランディングの基礎知識から事例、プロセス、マーケティング戦略までを網羅的に解説。企業やスタートアップのブランディング実践に役立つポイントが満載。SNSやYouTube、コンテンツマーケティングを活用したブランディング手法も紹介。ブランド構築に取り組む全ての方必見の完全ガイドです。
Start Reading
2024/02/05 10:37:34

ファイブフォース分析とは?具体例を挙げながらわかりやすく解説

ファイブフォース分析とは?具体例を挙げながらわかりやすく解説
Start Reading
2024/03/16 20:13:36

【2024年最新】オウンドメディアとは?企業の成長戦略を加速させる最強のコンテンツマーケティング手法

オウンドメディアとは自社で所有・運営するWebメディアのこと。メリットや始め方、運用のコツ、成功事例などを徹底解説。広告に頼らず自社の情報発信力を高め、見込み客を増やしブランド力向上を目指す方必見。
Start Reading
2024/02/05 8:54:38

マーケティング戦略で使える5W1Hとは?基本知識とケーススタディ7選

マーケティング戦略で使える5W1Hとは?基本知識とケーススタディ7選
Start Reading
2024/02/02 21:14:35

URLの基礎知識:構成要素の意味からSEO対策まで分かりやすく解説!

URLとは何か、基本的な構成要素から分かりやすく説明。独自ドメインやHTTPSなどのSEO対策も解説。Webサイトを制作・運営する上で知っておくべきURL の基礎知識をまとめました。
Start Reading