1. ホーム
  2. 用語辞典
  3. ファビコン

ファビコン

読み: ふぁびこん 英語: Favicon

ファビコンとは、ブラウザのタブやブックマークに表示される小さなアイコンのことです。サイトの識別に役立ち、ブランディングにも貢献します。

ファビコンとは

ファビコン（Favicon）は、「Favorite Icon」の略で、Webサイトを象徴する小さなアイコン画像です。通常16×16ピクセルまたは32×32ピクセルのサイズで、ブラウザのタブ、ブックマーク、履歴、アドレスバーなどに表示されます。

ファビコンを設定することで、多くのタブを開いている時でもサイトを素早く識別でき、ブランドイメージを強化する効果もあります。

💡 ファビコンが表示される場所
  • ブラウザのタブ（サイトタイトルの左側）
  • ブックマーク・お気に入り一覧
  • 履歴一覧
  • アドレスバー（一部のブラウザ）
  • スマホのホーム画面（Webクリップアイコンとして）

ファビコンの重要性

1. サイトの識別性向上

多くのタブを開いている状況でも、ファビコンがあればサイトを一目で識別できます。訪問者の利便性が向上します。

2. ブランディング効果

ロゴやシンボルマークをファビコンとして使用することで、サイトの印象を強化し、ブランド認知度を高めます。

3. プロフェッショナルな印象

ファビコンが設定されていないサイトは、未完成な印象を与える可能性があります。小さな要素ですが、サイトの完成度を高めます。

4. ブックマークでの視認性

ブックマークバーでファビコンが表示されることで、サイト名を読まなくても視覚的に識別できます。

ファビコンの推奨サイズと形式

推奨サイズ

サイズ 用途
16×16px ブラウザのタブ、ブックマーク
32×32px 高解像度ディスプレイ用
180×180px iPhoneのホーム画面用（Apple Touch Icon）
192×192px Androidのホーム画面用
512×512px PWA（Progressive Web App）用

ファイル形式

  • .ico：従来の標準形式。複数のサイズを1ファイルに含められる
  • .png：現代的な形式。透過に対応し、画質が良い（推奨）
  • .svg：ベクター形式。拡大縮小しても劣化しない（一部ブラウザ非対応）
✅ おすすめの設定
512×512ピクセルのPNG画像を1つ用意すれば、WordPressが自動的に各サイズに最適化してくれます。

WordPressでのファビコン設定方法

WordPress標準機能で設定

  1. WordPress管理画面にログインします。
  2. 「外観」→「カスタマイズ」を開きます。
  3. 「サイト基本情報」をクリックします。
  4. 「サイトアイコン」セクションで「画像を選択」をクリックします。
  5. ファビコン用の画像をアップロードまたはメディアライブラリから選択します。
  6. 画像をトリミング（必要に応じて）します。
  7. 「公開」をクリックして保存します。
💡 サイトアイコンの推奨仕様
WordPress推奨：512×512ピクセル以上の正方形画像（PNG形式）
WordPressが自動的に必要なサイズに変換してくれます。

テーマ機能で設定

一部のWordPressテーマでは、テーマ独自のカスタマイザーでファビコンを設定できる場合があります。テーマのドキュメントを確認してください。

効果的なファビコンのデザイン

✅ デザインのポイント
  • シンプルに：小さく表示されるため、複雑なデザインは避ける
  • ブランドカラーを使用：サイトのイメージカラーを反映
  • コントラストを意識：背景と明確に区別できる配色
  • 文字は1〜2文字まで：多くても2文字程度に抑える
  • ロゴの簡略版：サイトのロゴマークを単純化
  • 正方形に収める：余白を考慮してデザイン

良いファビコンの例

  • 企業ロゴのシンボルマーク：Appleのリンゴマーク、Twitterの鳥マークなど
  • イニシャル：サイト名の頭文字を大きく配置
  • アイコン：サイトの内容を表す象徴的なアイコン
⚠️ 避けるべきデザイン
  • 細かすぎる文字や線（小さく表示すると潰れる）
  • 多色使いすぎるデザイン
  • 背景色が透明で見えにくいデザイン
  • 長い文章や複数の要素を詰め込む

ファビコンの作成方法

オンラインツールを使う

  • Favicon.io：文字、絵文字、画像からファビコンを生成
  • RealFaviconGenerator：多様なプラットフォーム用のファビコンを一括生成
  • Canva：デザインツールでオリジナルのファビコンを作成

画像編集ソフトを使う

  • Photoshop：プロフェッショナルな編集が可能
  • GIMP：無料で高機能な画像編集ソフト
  • Illustrator：ベクター形式で作成

よくある質問（FAQ）

Q1. ファビコンは必ず設定しなければいけませんか？
必須ではありませんが、設定することを強く推奨します。ファビコンがないとブラウザがデフォルトのアイコンを表示し、未完成なサイトという印象を与える可能性があります。
Q2. ファビコンが反映されません。
ブラウザのキャッシュが原因の可能性があります。ブラウザのキャッシュをクリアするか、シークレットモード（プライベートブラウジング）で確認してください。また、反映まで数時間かかる場合もあります。
Q3. ファビコンのサイズはどれが良いですか？
WordPress標準機能を使う場合は、512×512ピクセルのPNG画像を用意すれば十分です。WordPressが自動的に必要なサイズに変換してくれます。
Q4. 透過PNGは使えますか？
はい、使えます。透過PNGを使用すると、ブラウザのテーマ（ライトモード・ダークモード）に関わらず綺麗に表示されます。ただし、背景とのコントラストを考慮してデザインしてください。
Q5. ファビコンを変更したい場合はどうすれば良いですか？
「外観」→「カスタマイズ」→「サイト基本情報」から、新しい画像をアップロードして変更できます。変更後はブラウザのキャッシュをクリアすると、すぐに新しいファビコンが表示されます。

まとめ

ファビコンは小さな要素ですが、サイトの識別性とブランディングに大きく貢献します。シンプルで視認性の高いデザインを心がけ、適切に設定しましょう。

✅ ファビコン設定のチェックリスト
  • 512×512ピクセル以上のPNG画像を用意
  • シンプルで視認性の高いデザインにする
  • ブランドカラーを使用する
  • WordPress標準機能で設定する
  • 複数のブラウザとデバイスで表示確認

関連用語

テーマ

テーマのカスタマイザーでファビコンを設定します。
メディアライブラリ

ファビコン画像をアップロードする場所です。
↑