自社オリジナルの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

Chrome、Safari各ブラウザのタブなど

  • 32×32

ブックマーク

  • 48×48

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

  • 64×64

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

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

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

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

ここでは、ファビコン制作に役立つ無料ツールを紹介します。
ファビコンのサイズやファイル形式は、表示される場所、ブラウザ、デバイス、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ピクセルですが、最適な結果を得るには少なくても260×260ピクセル以上のサイズを推奨しています。
ファビコンの設置状況をチェックしてくれるサービス付きで便利です。トップページの「Check your favicon」に、ファビコンを設置したホームページのURLをいれると、結果が表示されます。

X-Icon Editor

図7.png

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

アイコン素材サイト５選

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

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のみ）

アイコン配布中！

図12.png

商用利用可能なシルエットアイコンとリアルアイコンが、ダウンロードできるサイトです。
ダウンロードできるアイコンのファイル形式は、AI、PSD、PNG、PNGのパスデータです。アイコンは１日12個までダウンロードできます。１日は「24時間」のことをさします。最後にダウンロードしてから24時間以上立たないと次のダウンロードができないので、注意が必要です。

まとめ

インターネットで調べ物をする時、複数のサイトを立ち上げて作業することは珍しくありません。たくさんのタブが並びサイトの判別が難しい状況でも、ファビコンがあればサイトを見つけてもらいやすくなります。
そういった意味で、素材サイトは便利ですが、そのまま使ってしまうとどこかで見たようなデザインになってしまい”判別”しづらくなってしまうかも知れません。

競合サイトとの差別化のためにも、可能なら自社オリジナルのファビコンをつくりましょう。

ファビコン以外にも、Webサイト制作・運用に関する無料のお役立ち資料をイノーバでは公開しておりますので、よろしければご覧ください！

  • 自社の企業サイトを改善しようと思っている
  • コンテンツマーケティングに興味がある
  • コンテンツマーケティングが生み出す具体的な成果を知りたい

→　1つでも当てはまる方はこちら！


  • サイトリニューアルを検討しているが難易度が高く不安がある
  • サイト制作を外注するにあたって要件をどのように取りまとめるべきか分からない
  • ウェブ制作会社の選び方を知りたい

→? 1つでも当てはまる方はこちら！


  • サービスサイトがなぜ必要なのか知りたい
  • サービスサイトに何を掲載すべきか分からない
  • サービスサイトにおける注意点を知りたい

→? 1つでも当てはまる方はこちら！

人気記事

 

 

 関連記事