お気に入りにサイトを登録した際に、登録サイト名の左側やタブに小さなアイコンが表示されるのをみたことはありますか?
表示されるのは、目立たない小さなアイコンですが、サイトのブランディングやユーザビリティの向上に影響を与えるといわれています。
この記事では、ホームページのアイコンの有無が与える影響とその効果、アイコン制作で使える便利なツールや素材サイトを紹介します。
ホームページのアイコンとは?
ブラウザーのURL先頭部分やタブ部分、お気に入りにサイトを登録した際などに表示されるアイコンでファビコンともいいます。名前の由来は、お気に入り(favorite)のアイコン(icon)を意味する”favorite icon”で短縮されて、favicon(ファビコン)になりました。
他にもPC版Chromeトップページ(新しいタブ)の検索バー下の閲覧履歴やショートカット、スマホやiPhoneの検索結果表示でも表示されます。
参照 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を利用している場合は複数のサイズを作成する必要はありません。
ファビコン制作ツール5選
ここでは、ファビコン制作に役立つ無料ツールを紹介します。
ファビコンのサイズやファイル形式は、表示される場所、ブラウザ、デバイス、CMS付属機能などにより異なり、ツールを使う前に確認が必要です。ファイル形式はICO形式が一般的で、複数のサイズのアイコンを一つのファイルに格納する”マルチアイコン”が可能です。
ファビコンfavicon.icoを作ろう!
ファビコンの元になる画像から16×16、32×32、48×48ピクセルのファビコンがつくれます。元画像は別に用意する必要があります。サポートしている元画像のファイル形式は、PNG、GIF、JPG、BMPです。作りたいサイズを選択して、元画像を指定するとファビコンデータが生成されます。複数の大きさを指定すると、いくつかのアイコンが一つのファイルに格納された、マルチアイコンデータになります。
favicon.cc
ドット絵の感覚でファビコンが、ブラウザ上で作れる作成ツールです。手持ちの画像をアップして編集したり、元画像がなくても真ん中にある描画スペースに絵を描いて作成できます。
アップロードできる元画像のファイル形式は、PNG、GIF、JPG、JPEG、BMP、ico、curMaxです。ファルサイズは最大サイズ5MBまで。
ファビコンの描画は、描画スペースの右にあるカラーピッカーから好きな色を選んで、ドット絵の感覚で描いていきます。アニメーションファビコンもつくれて、他のユーザが作成したファビコンのデザインも参考にチェックできます。
WEBSITE PLANET
手持ちの画像もしくは、あらかじめ用意してあるアイコンギャラリーから、ファビコンがつくれます。
アップロードできる元画像のファイル形式は、PNG、GIF、JPGです。ファルサイズは最大サイズ5MBまで。生成できるファビコンのサイズは、ブラウザタブとブックマークで一般的に表示される16×16と、アンドロイドやIOS用などの全てのサイズ、元画像の寸法を保持したサイズになります。
Real favicon generator
全てのブラウザやプラットフォームに対応したファビコンが、元画像から一括で変換できます。
アップロードできる元画像のファイル形式は、PNG、JPG、SVGです。ファルは、最小サイズで70×70ピクセルですが、最適な結果を得るには少なくても260x260ピクセル以上のサイズを推奨しています。
ファビコンの設置状況をチェックしてくれるサービス付きで便利です。トップページの「Check your favicon」に、ファビコンを設置したホームページのURLをいれると、結果が表示されます。
X-Icon Editor
ブラウザ上で64×64、32×32、24×24、16×16ピクセルの4つのサイズのファビコンがつくれます。
ファビコンは、手持ちの画像をアップして編集したり、元画像がなくても描画スペースに絵を描いて作成できます。アップロードできる元画像のファイル形式は、PNG、GIF、JPG、BMP、icoです。複数の大きさを指定すると、いくつかのアイコンが一つのファイルに格納された、マルチアイコンデータになります。
アイコン素材サイト5選
ファビコンの元になる画像やロゴがない場合に使える無料素材サイトです。
ICOOON MONO
商用利用可能なモノクロのアイコン素材が、ダウンロードできるサイトです。6000以上のアイコンがあります。
ダウンロードできるアイコンデータのサイズは、16・32・48・64・128・256・512ピクセルです。ファイル形式は、PNG、JPG、SVGになります。小さな画像にしても、絵柄がつぶれないベタ塗りのアイコンがファビコンに利用できそうです。
IFN
商用可能なシンプルなモノクロアイコンがダウンロードできるサイトです。
ダウンロードできるアイコンのファイル形式は、SVG(一部未対応)、EPS、PNGです。デザインが明確でシンプルなものが多いので、ファビコンに利用しやすいです。アイコンの一つ一つには、コメントがついていて制作者の意図が伝わります。
DOTS DESIGN
商用利用可能なドット絵のアイコン素材が、ダウンロードできるサイトです。10,000を超えるアイコンがあります。ダウンロードできるアイコンのファイル形式は、基本GIFです。一つのアイコンが色違いやサイズ違いでセットになっているので、自分で色を変える必要がなくイメージに近いものを選択できます。
Icon-rainbow
商用利用可能なアイコン素材が、ダウンロードできるサイトです。
ダウンロードできるアイコンデータのサイズは、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のような一括チェックツールを使うと便利です。