概要
favicon(「favorite icon」の略)は、ブラウザのタブでページタイトルの隣に表示され、ブックマーク一覧にも、時にはブラウザの履歴や検索候補にも表示される、小さな正方形の画像です。通常はロゴを簡略化したもので、数ピクセルというサイズでも認識できるよう、文字1文字やシンプルな形、アイコンのようにデザインされています。
これを設定していないと、ブラウザは代わりに、汎用の白紙ページのアイコンを表示します。これは、faviconを設定していないあらゆるサイトに使われる共通のプレースホルダーであり、この項目が設定されていないことが一目でわかってしまいます。
重要な理由
faviconが欠けているのは些細なことですが、同時に非常に目立つ些細なことでもあります。サイトのすべてのページ、すべてのブラウザタブに、すべての訪問者に対して、常に表示され続けるからです。誰かが複数のタブを開いているとき、faviconはしばしば、その中から視覚的にあなたのタブを見つけ出す唯一の手がかりになります。汎用の白紙アイコンではそれが難しくなり、「このサイトはきちんと作り込まれていない」という印象を静かに与えてしまいます。
これはこのリストの中でも最も手っ取り早く改善できる項目の一つでもあります。コンテンツやデザインの判断とは違い、faviconの作成と追加は数分で終わり、一度設定すれば継続的なメンテナンスも不要です。
修正方法
- シンプルな正方形の画像(理想的にはロゴを簡略化したもの)を作成しましょう。無料のfavicon生成ツールを使えば、既存のロゴ画像から適切なファイル形式とサイズを自動的に作成できます。
- 作成した画像を
favicon.icoまたはfavicon.svgとして保存し、サイトのルートフォルダ(またはホスティングプラットフォームがアイコンファイルを配置する場所)にアップロードします。 - ページの
<head>セクション内に<link rel="icon" href="/favicon.ico">(またはSVG版の同等の記述)を追加します。 - Squarespace、Wix、Webflow、WordPressなどのサイトビルダーを使っている場合は、コードを直接編集するのではなく、サイト全体の設定にある「favicon」または「サイトアイコン」のアップロード欄を探してください。
- 新しいブラウザタブでページを再読み込みするか、ブラウザのキャッシュをクリアして、新しいアイコンが表示されることを確認しましょう。faviconはキャッシュされて更新が遅れることがあります。