Shopifyをはじめ、Webサイトに設定するファビコン。ファビコンの重要性は見過ごされがちですが、Shopifyストアには必ず設定したほうがよい機能です。
「ファビコンのメリットは？」
「ファビコンを設定したいけど、どうやって作るの？」
「Shopifyストアにファビコンを設定する方法が知りたい」
この記事を読むことで、ファビコンに関する疑問が全て解決！ファビコンのメリットや作成方法、Shopifyストアへの設定手順について、ぜひ参考にしてください。
ファビコンとは？
ファビコン（Favicon）は、Webサイトの象徴となる正方形の小さなアイコン画像のことです。ブラウザのタブやブックマークリストなどに表示されます。
ブラウザ「Google Chrome」のタブに表示されるファビコンの例を紹介します。以下の赤枠の画像がファビコンです。
画像引用：Google Chrome
ブラウザのブックマークに表示されるアイコン画像もファビコンです。
上の2つの画像のように、ファビコンはWebサイトを一目で識別できる視覚的なアイコンとして機能します。
Shopifyでファビコンを設定するメリット
Webサイトにおいて、ファビコンの設定は重要ですが、設定を忘れられているサイトもしばしば見かけます。この章ではShopifyのECサイトにおいて、ファビコンを適切に設定することで得られるメリットを解説します。
ブランドの認知度向上
ファビコンは、Shopifyサイトに訪問したユーザーの目に必ず止まります。
ブランドロゴやブランドのシンボルを設定することで、ユーザーの記憶に自然と定着し、ブランドの認知度向上につながるでしょう。
ユーザビリティの向上
多くのユーザーは、ブラウザで複数のサイトを同時に開いて閲覧しています。タブにファビコンが表示されることで、目的のサイトを素早く見つけることができます。
特にECサイトでは、ユーザーが複数ブランドの商品ページを同時に開いて検討することが多いため、ファビコンによる視認性の向上は、スムーズな購買行動を助けます。
また、もしファビコンを設定していない場合には、比較検討の際にユーザーから見落とされ、購入候補から外れてしまう可能性もあるでしょう。結果として、売り上げの減少につながりかねません。
検索時のクリック率向上
Googleなどの検索エンジンの検索結果にも、ファビコンは表示されます。
画像引用：Google Chrome
同じようなタイトルの検索結果が並んだ際、ファビコンの存在はクリック率の向上に貢献します。特にブランドの認知度が高まると、ユーザーはファビコンを目印にサイトを選択するようになり、検索結果からの流入増加が期待できます。
信頼低下の防止
ファビコンが設定されてないShopifyストアは以下の画像のように、何の特徴もないファビコンが自動表示されます。
ファビコンが設定されていないことで、「運営されているの？」「怪しいサイトじゃない？」「クオリティが低そう」などネガティブな印象を持たれてしまう可能性があります。顧客の信頼を損なわないためにも、必ずファビコンを設定しましょう。
Shopifyのファビコンの推奨サイズとファイル形式
Shopifyにおける、ファビコンの推奨サイズとファイル形式は以下の通りです。
| 推奨サイズ | 16px × 16pxまたは32px × 32px |
|---|---|
| ファイル形式 | JPEG、PNG、GIF |
画像ファイルのサイズが推奨サイズよりも大きい場合、アップロード時に32px × 32pxに自動で縮小されます。ファイル形式がICOやSVGのファイルは使用できません。
簡単にできるファビコンの作成方法
ファビコンの作成にはさまざまな方法があります。すでにブランドロゴやシンボルマークの画像を所有している場合、その画像を元にトリミングやリサイズなどを行って作成すると良いでしょう。iLoveIMGというツールを使うと、無料で簡単にトリミングやリサイズが可能です。
画像引用：iLoveIMG
ブランドロゴやシンボルマークの画像がなく、ゼロから作成する場合の簡単な方法を2つ紹介します。
方法1.Shopifyのロゴ作成ツール「Hatchful」
HatchfulはShopifyが提供する無料のロゴ作成ツールです。Hatchfulでロゴを作成すると、ファビコンも同時に作成してくれます。
Hatchfulのサイトにアクセスしましょう。「ロゴを作成する」をクリックします。
画像引用：Hatchful
業界を選択します。
以降、画面の指示通りに、「デザインのスタイル」「ビジネス名」「使用場所」を選択＆入力します。
多数のロゴパターンが作成されました。
気に入ったロゴを選択し、「ロゴを編集する」をクリックします。色やフォントなどを調整できます。
ロゴが完成したら、ダウンロードをクリックします。アドレス宛にzipファイルが送付されますので、ダウンロード後に解凍してください。ロゴやファビコンが格納されています。
Hatchfulはパターン化されているデザインを元に作成するツールです。「無料ツールでとりあえず作りたい」という方にオススメです。
方法2.生成AIを使用して作成
近年話題の画像生成AIを使えば、自社のブランドを表現した本格的なファビコンやロゴを、手軽に作成することが可能です。
オススメの画像生成AIはChatGPTで利用できるDALL･E3（ダリスリー）、またはMidjourney（ミッドジャーニー）です。「手軽に画像生成をしたい」という方はDALL･E3を、「本格的な画像を生成したい」という方はMidjourneyを用いるといいでしょう。
画像引用：DALL･E3
画像引用：Midjourney
Midjourneyにて5分程度で作成したサンプルロゴを掲載します。
注意点として画像生成AIで作成した画像を商用利用する場合、多くのツールで有料プランに加入する必要があります。
また画像生成AIを用いる際には、肖像権や著作権にも配慮が必要です。プロンプト（AIへの指示）に固有のブランド名や人名を入れないように注意しましょう。当然、他社ブランドのロゴを学習させて、画像生成を行うのはもってのほかです。NG例：ユニクロのロゴのようなファビコンを作成して
生成された画像はサイズが大きいため、リサイズツールのiLoveIMGなどを用いてサイズを調整しましょう。
画像生成AIの利用料金や使い方は各ツールによって異なります。DALL･E3（ChatGPT）は月額20ドルから、Midjourneyは月額10ドルからです。（2024年12月現在）
Shopifyへのファビコン設定手順
Shopifyストアへのファビコン設定手順を解説します。今回は無料テーマ「Dawn」を参考にします。使用するテーマによって設定箇所や手順が少し異なりますので注意してください。
ストア管理画面より、「オンラインストア」 > 「テーマ」 > 「カスタマイズ」の順に選択します。
画像引用：Shopify
「テーマ設定」の箇所にある「ロゴ」をクリック。「ファビコン画像」の箇所の「選択」をクリックし、「画像を追加」をクリックします。画像ファイルをアップロードします。
画像を選択して「完了」をクリックします。画像が設定されたら、右上の「保存する」をクリックします。
これでファビコン画像が設定されました。
画像引用：Google Chrome
ストアには必ずファビコンを設定しよう！
この記事ではShopifyストアにファビコンを設定するメリットやファビコンの作成方法、Shopifyストアへの設定手順を解説しました。
ブランド認知度向上や信頼低下防止などの観点から、Shopifyストアへのファビコン設定は必須と言えます。
今回の記事を参考にファビコンを作成、設定してみてください。
