ファビコンとは？ウェブサイトにファビコンを追加する方法
「小さなものが良いものだということわざ」は、ファビコンにも確かに適用されます。この小さなブランドバッジは、1990年代のInternet Explorerの頃からWebブラウザに登場し、ブラウザタブとブックマークに表示されています。ファビコンは、顧客がウェブサイトを会社のブランドアイデンティティに関連付けるのを助ける視覚的な要素です。
今、あなたは一般的なブラウザアイコンを超えなければならない時です。すぐに目立つ（タブがいっぱいのブラウザウィンドウで顧客が簡単にナビゲートできるように）、ヘルプを提供するFaviconを作成できます。
ファビコンとは？
ファビコンは、Webブラウザのタブ、ブックマークバー、お気に入りバー、ブラウザ履歴の結果、検索エンジンの結果ページ（SERPs）の横に表示される小さなグラフィックです。
「お気に入りアイコン」の合成語であるファビコンは、ウェブサイトの視覚的なブックマークとして機能し、複数のタブが開いているときにユーザーが簡単にWebページを識別するのに役立ちます。 Webサイトが最小化されると、ファビコンはタスクバーのショートカットアイコンとして表示されることがあります。ユーザーがウェブサイトをブックマークすると、Faviconはブックマークアイコンとしても使用され、保存された複数のWebページ間でそのWebサイトを簡単に見つけることができます。
一部のオペレーティングシステムでは、URLをブラウザウィンドウからデスクトップにドラッグアンドドロップすると、デスクトップショートカットアイコンが生成されます。ブラウザのファビコンはしばしばこれらのショートカットアイコンとして再利用されます。
ファビコンの使用の利点
- クリック率（CTR）の増加
- ブランド認知の構築
- ユーザー体験と滞在時間の改善
ファビコンはウェブサイトのSEOランキングを魔法のように高めませんが、ファビコンを追加して他のUXデザインを改善することで、よりユーザーフレンドリーなウェブサイトを作成できます。ファビコンがウェブサイトのパフォーマンスに与えるより重要な影響は次のとおりです。
クリック率（CTR）の増加
Googleや他の検索エンジンは検索結果にファビコンを表示します。目立つ、または簡単に把握できるファビコンは、ブランド認知度を高め、人々がウェブサイトを訪問する可能性を高めます。これはクリック率（CTR）を増加させ、CTRはSEOにとって重要なeコマース指標です。
ブランド認知の構築
ファビコンがブランドロゴを強化すると、ユーザーのブックマークバー、ウェブサイトのタブ、検索エンジンの結果ページ（SERP）で無料の広告として機能し、ブランドの認知度を高めることができます。
ユーザー体験と滞在時間の改善
すぐに認識可能なFaviconは、ユーザーがWebページをブックマークする可能性を高めます。これは、Googleなどの検索エンジンで肯定的な信号として認識されます。この小さなユーザーエクスペリエンスの向上により、再訪問が促進され、ウェブサイトのトラフィックと滞留時間（ユーザーが検索エンジンの結果ページに戻る前にWebページに滞在する時間）が増加します。
ウェブサイトファビコン製作ガイドライン
- 適切なサイズを選択
- 互換性のあるファイル形式の選択
- アニメファビコンを考える
良いファビコンは、特定のサイズとファイル形式の要件に準拠する必要があります。
適切なサイズを選択
ファビコンの理想的なサイズは16×16ピクセルですが、一部のファビコンは32×32ピクセルまたは48×48ピクセルで設計されています。 16x16サイズは、すべてのWebブラウザディスプレイ（アドレスバー、タブ、ブックマークビュー）でサポートされているため、最も安全な選択です。
互換性のあるファイル形式の選択
元のファイル形式は、画像がファビコンに変換される方法に大きな影響を与えます。ファビコンを作成するときに最も一般的に使用されるファイル形式はPNGとICOです。 PNGファイルはロスレスデータの圧縮と透明性を提供し、画像がサイズ変更されても品質が低下しません。 ICOファイルはMicrosoft Windows Explorerで使用されており、複数のサイズと色の深さを持つ1つ以上の画像が含まれているため、サイズ変更がよくなります。 SVG形式はブラウザのサポートが少なく、すばやくロードされ、無限に拡張可能です。 JPEGなどの縮小時に画像データが失われる形式は避けることをお勧めします。
アニメファビコンを考える
アニメーションGIFまたはJavascriptファイルは視覚的な魅力を追加することができますが、互換性の問題を含む制限があります。 Google Chromeではうまく見えますが、他のブラウザでは壊れる可能性があるため、複数のブラウザでアニメーションファビコンをテストしてみてください。
人気のファビコンジェネレータ
オンラインファビコンジェネレータを使用して、ブランドのアイデンティティに合わせてカスタマイズされたファビコンを作成できます。以下は人気のあるオプションです：
- Favicon.io ：画像ファイル、リンク、またはテキストでファビコンを作成し、さまざまな形式に変換するためのツールです。変換されたファイルをダウンロードしたら、ウェブサイトのルートディレクトリに配置し、リンクタグをコピーしてHTMLページのヘッドタグに貼り付けます。
-
RealFaviconGenerator ：マスターイメージをどのように処理してファビコンを作成するかを指定できるインタラクティブAPI。
-
Favicon Generator ：プラットフォームごとにファビコンを作成することができ、デザインがさまざまなプラットフォームやブラウザでどのように見えるかを確認できます。
- Favicon.ico＆App Icon Generator from Dan's Tools ：既存の画像をアップロードしてICO形式に変換したり、アイコンギャラリーからデザインを閲覧したりできます。
HTMLにFaviconを追加する方法
サイトのファビコンを作成したら、それをWebサイトにアップロードしてコードに追加して、ブラウザとWebアプリで表示できるようにする必要があります。
ファビコンを指すコードは、WebサイトのHTMLファイルの<head>セクションに行として追加されます。ブラウザは<head>タグの指示を読み、ファビコンを見つけて表示します。たとえば、ファビコンファイルが "brandXicon.png"という名前のPNGファイルの場合は、次のように<head></head>タグ内にコードを追加します。
<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/ja/brandXicon.png">
ファビコンはサイトのどのディレクトリにも存在できます。上記の例では、サイトのルートディレクトリに含まれており、これは一般的な場所です。ファイルパスが正しいことを確認してください。
複数のサイズのファビコンをすべて読み込むこともできます。各サイズに一意のファイル名を指定し、コードに「sizes」属性を追加する必要があります。例えば：
<link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/ja/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/ja/brandXicon32x32.png">
ショピファイのウェブサイトにファビコンを追加する方法
ショーピファイのウェブサイトを使用している場合は、コーディングなしで簡単にファビコンを追加できます。
1.デスクトップWebブラウザで、オンラインストア管理パネルに移動します。
2. 「Themes」>「Customize」を選択してテーマエディタを開きます。
3. 「Themes Settings」をクリックします。ギアのアイコンを探します。
4. Faviconを選択します（一部のテーマでは「Logo」と呼ばれる場合があります）。
5.ストアライブラリから画像を選択するか、新しい画像をアップロードします。
6.利用可能な場合は、アクセシビリティのためにファビコンの「Alt Text」を編集します。このテキストは、ユーザーがFaviconの上にマウスを置いたときに表示されます。
7. ジョブを保存し、さまざまなブラウザでファビコンのパフォーマンスをテストします。
iPhoneまたはAndroidデバイスでFaviconを追加する方法の詳細については、Shoppy Piのヘルプトピックを参照してください。
WordPressでFaviconを追加する方法
オンラインストアがWordPressのウェブサイトである場合、ファビコンを追加するためのステップバイステップのガイドは次のとおりです。
1. WordPress ダッシュボードに移動し、「Appearance（外観）」をクリックします。
2. 「Customize（カスタマイズ）」をクリックしてオプションのリストを開きます。
3. 「Site Identity（サイトのアイデンティティ）」をクリックします。ここでは、サイトのタイトル、タグライン、ロゴなどを設定できます。
4. 「Site Icon（サイトアイコン）」セクションで、「Select Site Icon（サイトアイコンを選択）」をクリックして新しいファビコン画像をアップロードします。
5. [Publish] をクリックして変更を適用します。
6. さまざまな Web ブラウザでファビコンの外観をテストします。
WixでFaviconを追加する方法
Wixのウェブサイトには基本的なファビコンが設定されていますが、プレミアムプランのメンバーはこれをカスタマイズできます。 Wix サイトでファビコンを変更するには:
1. サイトダッシュボードで「Settings（設定）」に移動します。
2. 「Favicon（ファビコン）」の横にある「Manage（管理）」をクリックします。
3. 「Upload Image（画像のアップロード）」をクリックするか、「Upload Media（メディアのアップロード）」をクリックしてコンピュータから画像をアップロードします。
4. 「Add to Page（ページに追加）」をクリックします。ブラウザタブでファビコンの外観を事前に確認できます。
5. [Save] をクリックし、[Publish] をクリックして変更を適用します。
ファビコンのよくある質問
ファビコンはロゴと同じですか？
ファビコン（"favorites icon"）は、検索結果、ブラウザタブ、ブックマークバーのサイトのページ名または住所の横に表示される小さなアイコンで、Webユーザーがページを簡単に識別できるようにします。一方、ロゴはブランドをマーケティング環境全体に代表するグラフィックシンボルやデザインです。ほとんどのブランドファビコンはロゴとデザイン要素を共有し、ロゴが十分に単純な場合は同じかもしれません。
ファビコンの例は何ですか？
ファビコンは、Webブラウザのアドレスバーアイコンまたはタブアイコンとして表示されます。これにより、ユーザーが複数のタブやブックマークの間でウェブサイトを視覚的に簡単に識別できるようになります。たとえば、Shoppy PieのFaviconは、ロゴからの「S」付きのショッピングバッグの外観を使用します。
ファビコンをデザインするツールはありますか？
はい、ウェブサイト用のファビコンを設計するのに役立ついくつかのツールがあります。そのうちのいくつかは無料で利用できます。たとえば、Favicon.ioやRealFavIconGeneratorなどのオンラインジェネレータは、簡単にFaviconを作成できるプラットフォームを提供します。