ファビコンとOGP画像の設定方法を徹底解説｜ブランド認知度を高める重要な要素

#フロントエンド #ホームページ

2024/09/19

投稿者：ブンタ

「ファビコン」と「OGP画像」は、Webサイトの第一印象やSNSでのシェア時に重要な役割を果たします。これらの要素を適切に設定することで、ユーザー体験を向上させ、ブランドの認知度を高めることができます。

本記事では、ファビコンとOGP画像の役割や作成方法、設定時のポイントについて詳しく解説します。Webサイトの印象を左右するこれらの要素を正しく取り扱い、ユーザーに好印象を与えましょう。

設定方法のみを知りたい方は、目次から該当セクションへ移動してください。

ファビコンとは？

ファビコン(favicon)は、Webブラウザのタブやブックマーク、スマートフォンのホーム画面などで表示される小さなアイコンのことです。

ファビコンは1999年にMicrosoftのInternet Explorer 5で初めて導入され、現在ではほとんどのブラウザで利用されています。

当初はブックマーク（お気に入り）に追加されたサイトのアイコンとして表示されるものだったので、お気に入りのアイコン(favorite icon=フェイバリット・アイコン)が略され、ファビコンと呼ばれるようになりました。

ファビコンの役割

視認性の向上
ブラウザのタブやブックマークに表示されるため、ユーザーは複数のタブを開いていても、目的のサイトを素早く識別できます。
ブランドアイデンティティの強化
ファビコンをブランドのロゴや象徴的なデザインに統一することで、ブランドの認知度を高め、ユーザーに視覚的な印象を残すことができます。
リピート率を向上
視覚的に覚えやすいため、ユーザーが再度サイトを訪れる際の手がかりになります。

OGP画像とは？

OGP（Open Graph Protocol）は、SNS上でコンテンツがシェアされた際に、その表示を最適化するためのプロトコルです。特に、OGP画像はシェアされたページのイメージとして表示され、視覚的なインパクトを与えます。

OGP画像の役割

クリック率の向上
SNS上でシェアされた際に視覚的なインパクトを与え、クリック率を向上させます。
コンテンツの魅力向上
適切にデザインされたOGP画像は、コンテンツの見栄えを改善し、SNSでシェアされた際にもプロフェッショナルな印象を与えます。
ブランドの認知度とエンゲージメントの向上
OGP画像を通じてブランドの認知度が向上し、シェアや反応が増えることで、SNS上でのエンゲージメントを高めます。

ファビコンとOGP画像のSEOへの影響

ファビコンやOGP画像は直接的なSEOランキング要因ではありませんが、ユーザー体験（UX）やサイトの視認性を向上させるため、間接的にSEOに良い影響を与える可能性があります。

ファビコンのSEOへの影響

Googleは、検索結果にファビコンを表示することで、ユーザーのクリック率を高めるとしています。ファビコンがあると、検索結果ページでの認知度が上がり、クリックされる確率が高くなります。

OGP画像のSEOへの影響

OGP画像は、SNSでのシェア時にコンテンツの魅力を高め、結果としてサイトへのトラフィック増加に貢献します。検索エンジンはサイトの人気やエンゲージメントを重要視するため、SNS上での反応が良いと検索ランキングに好影響を与える可能性があります。

ファビコンに必要なファイル

以前は、多くの異なるブラウザやデバイスに対応するために、20種類以上のファビコン画像が必要とされていましたが、現在ではブラウザやデバイスが進化し、汎用性の高いフォーマットや解像度に対応できるようになったため、以前ほど多くの種類は必要なくなっています。
また、WordPressでは必要なファイルを自動生成してくれるため、512x512pxのpng画像が1枚あれば大丈夫です。

今回はWordPressなどのCMSを使わない場合の設定方法のご紹介です。

2024年現在の最低限必要なファイルは以下の6つです。

icon.svg
favicon.ico
apple-touch-icon.png
icon-192.png
icon-512.png
manifest.webmanifest

画像ファイルが５つとjsonファイルが1つです。

では、各ファイルについてのそれぞれの用途と特徴を解説します。

icon.svg / モダンブラウザ用のSVGアイコン

用途：SVG（Scalable Vector Graphics）はベクターフォーマットで、解像度に依存せず高品質なアイコンを提供できます。SVGはファイルサイズが小さく、モダンブラウザで広くサポートされています。レスポンシブデザインに最適で、拡大しても画像が劣化しないため、さまざまな解像度に対応可能です。
主な特徴：モダンブラウザ（Chrome、Firefox、Safariなど）で最適な表示を提供します。1つのSVGファイルであらゆるサイズに対応するため、効率的です。

favicon.ico / レガシーブラウザ用のファビコン

用途：ICO形式は、古いブラウザやWindowsのレガシーシステムで使われる標準的な形式です。ICOファイルには複数の解像度（16x16px、32x32px、48x48pxなど）を含めることができ、レガシーブラウザやデバイスでも正しく表示されます。
主な特徴：レガシーブラウザや、ブラウザのタブやブックマーク、ショートカットなどで使用されます。互換性を確保するため、最低でも32x32pxの解像度を含んだICOファイルを用意します。

apple-touch-icon.png / Appleデバイス用のアイコン

用途：iPhoneやiPadのホーム画面にサイトを追加した際に表示されるアイコンです。Appleデバイス向けには専用のアイコンが必要で、PNG形式が推奨されています。apple-touch-icon.pngをHTMLに追加することで、iOSデバイスで最適に表示されます。
主な特徴：iOSデバイスのホーム画面に表示されるアイコンで、視覚的なブランドの一貫性を保つために重要です。next.jsのようなフレームワークを使用する場合、apple-icon.pngのファイル名が使われることがあります。サイズは180x180pxを用意します。

icon-192.png , icon-512.png / Androidデバイス用のアイコン

用途：Androidデバイスでは、ホーム画面に追加した際やウェブアプリとして使用されるときにこれらのアイコンが表示されます。特にicon-192.pngはホーム画面用、icon-512.pngは高解像度ディスプレイやアプリケーションショートカットに使用されます。
主な特徴：Androidデバイス向けの最適なアイコンを提供するため、192x192pxと512x512pxを準備します。

manifest.webmanifest

用途：ウェブアプリとしてインストール可能なPWA（プログレッシブウェブアプリ）の設定ファイルです。このファイルには、ウェブアプリの名前、アイコン、表示モード、テーマカラーなどを記載することができ、Androidデバイスでのホーム画面への追加やインストール時に使用されます。manifest.webmanifestには、前述のicon-192.pngやicon-512.pngの参照も含まれています。
主な特徴：ウェブアプリの基本設定を管理し、AndroidデバイスやPWA対応ブラウザでのアプリ体験を最適化します。これにより、サイトがホーム画面にインストールされた際の見た目や動作が一貫します。

これらのファイルを正しく設定することで、モダンブラウザからレガシーブラウザ、そしてさまざまなデバイスに対応したファビコンの表示を実現できます。

ファビコンの設定方法

画像ファイル

まずは以下の5種類の画像ファイルを用意します。
icoファイルが作れない場合は、以下のようなサイトでpngファイルを変換するといいでしょう。
https://convertio.co/ja/png-ico

ファイル名	サイズ	用途
icon.svg		モダンブラウザ
favicon.ico	32×32	レガシーブラウザ
apple-touch-icon.png	180×180	Appleデバイス
icon-192.png	192×192	Androidデバイス
icon-512.png	512×512	Androidデバイス

マニフェストファイル

manifest.webmanifestという名前のファイルを用意し、以下の内容を記述します。

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

HTMLに記述

HTMLファイルのheadタグの中に以下のコードを記述します。
画像ファイルを置く場所によってパスは変わりますので注意してください。

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

これでファビコンの設定は完了です。

OGPの設定方法

続いてOGP画像の設定をします。

画像ファイル

OGP画像で用意するのは、サイズが1200x630pxのpngまたはjpeg形式のファイル一つです。Facebook、X、LinkedInなど、SNSごとに若干の違いがある場合がありますが、基本的には同じOGP画像を使えます。
プラットフォームによっては表示方法が異なることを考慮し、重要な要素は画像の中央に配置するのが安全です。

ファイル名	サイズ
ogp.png	1200×630

作成した画像が実際のSNSでどのように表示されるかは、以下のサイトで確認することができます。
https://ogimage.tsmallfield.com

OGPシュミレーター

HTMLのコード

ファビコンは相対パス(ファイルからの位置を相対的に記述するパス)でしたが、OGP画像のURLは、絶対パス(‘https://’から始まる絶対的なパス)の使用してください。
これは、SNSプラットフォームがページの内容をキャッシュする際、相対パスではなく完全なURLを必要とするためです。相対パスだと、正しく画像が表示されない可能性があります。

<meta property="og:image" content="https://clip77.com/ogp.png" />
<meta property="twitter:image" content="https://clip77.com/ogp.png" />

OGPは画像だけでなく、以下のように、タイトルやディスクリプション、URLなども合わせて記述しておくのがおすすめです。

<!-- Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clip77.com/" />
<meta property="og:title" content="くりっぷ" />
<meta property="og:description" content="くりっぷは大阪を拠点に..." />
<meta property="og:image" content="https://clip77.com/ogp.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://clip77.com/" />
<meta property="twitter:title" content="くりっぷ" />
<meta property="twitter:description" content="くりっぷは大阪を拠点に..." />
<meta property="twitter:image" content="https://clip77.com/ogp.png" />