【簡単！】Shopifyでファビコンを設定する方法をご紹介！

Shopifyでオンラインショップ運営をするときは、ショップページのデザインや操作機能に注力してしまいます。

そうして設定を忘れがちになるのがファビコン（favicon）です。

ファビコンは、Shopifyで運営するオンラインショップのブランド全体を意識させる重要な役割を担っています。

というのも、ファビコンはオンラインショップを訪れた人に、小さいながらも画像や色で快適さと安心を感じさせてくれるからです。 

そこで、ここでは、Shopifyのオンラインショップにファビコンを設置する方法についてまとめました。

ファビコンの設定はとても簡単で、ショップブランディングにも有効ですから、この機会にしっかり設定をしましょう。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

ファビコンとは

ファビコン（favicon）とは、オンラインショップサイトのアイコンのことです。

パソコンのアドレスバーや、ブラウザのタブなどに小さく表示される四角い画像で、スマートフォンだとWebページをホーム画面に出したときに表示されるマークのようなものを指します。

ちなみにファビコンは、『フェイバレット アイコン（Favorite icon）』の略語で、『お気に入りのアイコン』という意味です。

つまりファビコンは、ウェブサイトの運営者が設置するシンボルマークみたいなものです。

このように、Webページを利用したことがある人なら必ず目にするファビコンですが、サイトを制作するときに設定を忘れてしまう人も少なくありません。

ファビコンは、単なる小さなアイコンと思いがちですから。

ですがファビコンは、あなたのオンラインショップサイトを一目でお知らせするアイテムとして重要な役割を担っているのです。

また、ファビコンは簡単に作成ができ、目に見えないメリットをもたらしてくれる効果もあります。

つまりファビコンは、単に小さな四角いグラフィックであっても、あなたのオンラインショップサイトをアピールする存在なのです。

そして、数あるオンラインショップのブラウザ画面上で、あなたショップを目立たせる役割をしています。

たとえば、PC上で複数のタブを開いて操作しているとき、そのタブが何のページだったかをひと目でユーザー側に認知させるのがファビコンです。

なので、ショップサイトをファビコンの画像によって認識し記憶してもらえることで、リピート閲覧に繋げられるかもしれないのです。

ファビコンは簡単に作れますから、オンラインショップサイトにはぜひ設置しておきましょう。

ファビコンの推奨サイズとは？

ファビコンの推奨サイズは、ブラウザごとに異なりますが、主なサイズは次のとおりです。

• 16px × 16px　Internet Explorerタブに推奨
• 24px × 24px　Internet Explorer 9 ピン留め機能に推奨
• 32px × 32px　Google Chrome、Firefox、Safari などのタブに推奨
• 48px × 48px　Windowsのウェブサイトに推奨
• 64px × 64px　高解像度 Windows Webページに推奨

とはいえ、上記のすべてをつくるのはなかなか大変ですから、とりあえず『16px × 16px』もしくは『32px × 32px』で作成してみると良いでしょう。

なお、フォーマット形式は『.png』『.gif』『.ico』などになりますが、ブラウザによっては『.png』『.gif』に非対応の場合もありますから、その場合は『.ico』でつくるのがオススメです。

また、ワンサイズだけだと、表示スタイルによっては自動縮小になり、表示が綺麗に見えなかったり、歪んだりすることもありますから、設定後に確認しながら追加で作成・入れ替えするようにしましょう。

ファビコンをデザインするときのポイント

ファビコンは、どのサイズで作成しても小さいので、複雑なものや細かいデザインなどは必要ありません。

逆に小さくてもシンプルで見やすい、わかりやすいデザインのほうが目を引く傾向にあります

また、サイズが小さいので画面を構成する画素ドットを意識して作ると、人目を引く見やすいデザインに仕上がります。

ですから、既にあるイメージデザインを縮小利用するときも、ドットを意識してシンプルに調整していくと綺麗なアイコンに仕上がります。

ファビコン設定時の注意点

ファビコンをサイトに設定したときは、画像が事前にイメージしたとおりに表示できているかどうかを確認しましょう。

たとえば、BASIC認証がかかっている状態では、ファビコンがキチンと表示されないことがあります。

特にAndroidなどでBASIC認証がかかった状態だと、チェック時には問題なくても、実際にウェブで開いてみると正しく表示されないということが少なからずあります。

なので、ファビコンをサイトに設定したら、BASIC認証がかかっていない状態か、ローカル環境で確認をするようにしましょう。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

Shopifyでファビコンを設定するメリット

ファビコンは、パソコンで複数のタブを開いて操作するユーザーにとって、今スグ見たいサイトの場所を判別させる目印代わりになります。

というのも、多くのユーザーはタブに表示されるファビコン画像を見て、瞬時に何のサイトだったかを判断しているからです。

なので、ファビコンは小さい単純な画像であっても、とても重要な役割を担っているということが言えます。

また、ファビコンをデザインにもこだわってシンプルに見やすく作成していると、『このサイトは細部にも気を配っているきちんとしたサイトだな』といった信頼性を得られる効果もあります。

ですから、Shopifyのオンラインショップサイトにファビコンを設定するときは、訪問されるお客様目線で、シンプルかつシンボリックなデザインで作成すると良いでしょう。

なお、Shopifyには、ファビコンを簡単にデザインして作成することができる『Hatchful』というサービスもありますから、誰でも簡単にオリジナルデザインでファビコンを作成することができます。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

【Shopify】Hatchfulを活用すれば簡単にクオリティの高いファビコンが作成可能

Hatchfulとは

Hatchful

Hatchfulは、Shopifyがユーザーに提供しているロゴメーカーサイトで、商用利用可能な企業ロゴやブランドのロゴを誰でも簡単に作成することができます。

操作方法はとても簡単で、名前、業界、企業スローガンなどを入力すると、たくさんのロゴを自動提案してくれますから、

• ロゴデザインを決めるのにどうしたら良いかわからない
• 今すぐショップロゴをデザインしたい

というお悩みの方には、とてもオススメできるサービスです。

また、Hatchfulは、ファビコン作成だけでなく、SNS用のアイコンやバナー画像なども同時に作成することができます。

ファビコンを利用しているSNS用に一つ一つ作成していくのは意外と手間ですから、同時に複数サイズの作成とダウンロードができるのはとても便利です。

Hatchfulの利用方法

操作方法はとても簡単で、次の8つのステップで行うだけです。

1. https://hatchful.shopify.com/ja/にアクセスし『使ってみる』をクリック
2. ビジネスを選択し『次へ』をクリック
3. デザインのスタイルを選択し『次へ』をクリック
4. 『ビジネス名（任意）』『スローガン』を入力し『次へ』をクリック　※後ほど変更可
5. ロゴをどこで使用するかを選択（複数選択可）し『次へ』
6. ロゴを複数作成してくれるので、好きなロゴデザインを選択し『次へ』をクリック
7. ロゴの色やフォント、レイアウト編集でデザインが完成したら『次へ』をクリック
8. 作成したデザインデータをダウンロード

なお、完成したデザインをダウンロードする場合は、無料のアカウント作成・登録が必要です。

登録をすると、アカウントのメールアドレス宛に、完成したロゴデザインのデータが各SNSに最適化されたサイズで送られてきます。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

Shopifyでファビコンを設定する方法

上記のように作成したファビコンを、Shopifyのオンラインショップサイトに設定する方法は次のとおりです。

1. Shopifyの管理画面から 『オンラインストア』＞『テーマ』へ
2. ファビコンを設定したいテーマを選び『カスタマイズする』をクリック
3. 画面左下にある『テーマ設定』を選択
4. メニューの『ファビコン』を選択し『「画像を選択する」をクリック
5. ファビコンの画像ファイルをアップロード
6. 『選択』をクリック

以上でファビコン設定は終了です。

なお、上記の編集作業をするときは、その都度必ず右上にある『保存』をクリックして作業内容を保存するようにしてください。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

Shopifyでファビコンを作成・設定する際に意識しておくべき3つのポイント

ファビコンは、

• ブラウザのタブ
• ブックマーク
• ナビゲーションバー
• ツールバーアプリ
• 履歴結果
• 検索バー
• ソーシャルメディア

などで表示されますから、Shopifyのオンラインショップサイト運営で効果的なブランディングをしたいのなら、ファビコンを設定するのはアリです。

また、ファビコンは小さいサイズですが、次のような3つの効果を発揮してくれます。

1.信頼性

ファビコンは小さいサイズですが、デザイン性を意識して設定しておくとサイトの信頼性とプロフェッショナル度が得られます。

2.ブランド力のアピール

ファビコンは、あなたのオンラインショップサイトの名前と同じくらい重要な役割をしています。

なぜなら、訪問者はその両方を目にすることになるからです。

3.リピート訪問の目安として

たとえば、あなたのオンラインショップサイトを初めて訪れたユーザーが、急いでいたため後で読もためにブックマークしたとして、後日ブックマークを見たユーザーはリストの中にあるファビコンマークであなたのサイトを認識します。

これは、ブックマークによるリピート再訪される可能性をファビコンは持っているということに他なりません。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

まとめ

Shopifyのオンラインショップサイトに設定するファビコンは、とても小さな存在です。

ですが、この小さく強力な画像のもたらす効果は、あなたの想像以上かもしれません。

ファビコンは、あなたのサイトをユーザーにアピールするのに有効ですから、必ず設定したほうが良いですよ。