ファビコンを追加する方法 Shopify ショップ

とは何かの基本を学ぶ Shopify ファビコンとオンラインストアにファビコンを配置する方法。

のアイデンティティ あなたのeコマースストア ロゴ、サイトの色、 マーケティング資料。 このアイデンティティは、ブランド全体を強化し、顧客に健康的なリマインダーを作成し、顧客がブランドの画像や色を見たときに快適さと信頼性を感じさせます。 サイズは小さいですが、ファビコンはそのブランディング戦略にも結びついています。 このチュートリアルでは、ファビコンを作成して追加する方法を説明します。 Shopify 店舗、オンラインの外観を完成させ、顧客が訪れたときに店舗を認識しやすくします。

とは Shopify ファビコン?

A Shopify ファビコン、またはそれに関するファビコンは、Webサイト名の横のブラウザタブに表示されるWebサイトの小さなアイコンです。

ブラウザのアドレスバーは、サイトのファビコンを表示するための最も一般的な領域ですが、次の場所にも表示されます。

  • ツールバーアプリ
  • ブックマーク
  • 履歴結果
  • 検索バー
  • ソーシャルメディアで共有される場合もあります

基本的に、ブラウザがWebサイトへのリンクを表示する必要があり、他のコンテンツ用のスペースがあまりない場合は常に、通常のフルサイズのロゴがファビコンに置き換えられます。

Shopify ファビコンの例

デフォルトでは、 Shopify 追加します Shopify ファビコンのロゴなので、変更する必要があります。

良いファビコンは、多くの場合、ロゴの小さいバージョンですが、表示されるようにし、割り当てられたすべてのスペースを占有し、Webサイト名の横に少し色を追加するために、ロゴが少し異なる場合があります。

デフォルトでは、すべてのブラウザが32×32ピクセルのサイズのファビコンをサポートしています。 それはかなり小さな画像ですが、いくつかのオンラインジェネレータの助けを借りてあなたはあなた自身のものを作ることができます Shopify あなたのウェブサイトのファビコン。 また、大きな画像はとにかく縮小されるので、必ずしも正確に32×32にする必要はありません。

ファビコンは、上のオンラインストアにとってかなり意味があります Shopify 追加が簡単で、オンライン販売者としてのブランドアイデンティティを強化することが重要です。 また、SEOに役立つと主張する人もいます。

ファビコンをに追加する方法の詳細については、読み続けてください Shopify 保管してください。

ファビコンを追加する方法 Shopify ショップ

前述のように、サイトを実行するとき Shopify 自動的に追加されます Shopify サイトのファビコンとしてのロゴ。 それは何も悪いことではありませんが、独自のロゴを含める方がはるかに専門的でブランド志向です。

したがって、あなたのに行きます Shopify ダッシュボードをクリックし、[販売チャネル]の下の[オンラインストア]をクリックします。

テーマに移動し、現在のテーマの横にある[カスタマイズ]ボタンをクリックします。 設定はテーマごとに異なりますが、最新のものはすべて Shopify テーマには、ファビコンを変更するセクションがあります。

オンラインストア

メディア Shopify カスタマイザーで、左側のリストの一番下までスクロールし、[テーマの設定]をクリックします。

テーマ設定

新しいセクションで、[ファビコン]ボタンを見つけて選択します。

ファビコン- Shopify ファビコン

これにより、[画像を選択]または[無料の画像を探索]ボタンが表示されます。 あなたのロゴに一致する無料の画像があるとは思えないので、[画像の選択]をクリックして、コンピューターからカスタム画像をアップロードすることをお勧めします。

画像を選択

ファビコンファイルを選択してアップロードします Shopify.

その後、ファビコンアイコンのプレビューが表示されます。 変更を永続的にするには、の[保存]ボタンを選択します Shopify.

保存ボタン

あなたを表示するには Shopify ファビコンの動作については、Webサイトのフロントエンドに移動し、現在のブラウザタブを確認してください。 サイトタイトルの横にファビコンが表示されます。

例 Shopify ファビコン

ファビコンを作成するためのヒント

小さなアイコンを生成するのは簡単なようですが、顧客がサイトにアクセスするたびにファビコンが表示されることを考慮すると、正しく作成することが重要です。 また、ぼやけている、またはスペース全体を埋めていないファビコンを作成するのも簡単で、目に見えないため、ファビコンの目的が損なわれます。

問題を解決するために、ここにあなたを作成するためのいくつかのヒントがあります Shopify ファビコン:

  • 32×32より大きいデザインを開始し、必要に応じて縮小します。 小さい画像をスペースに引き伸ばそうとすると、画像がぼやけてしまいます。 たとえば、Hatchfulから32×32の画像を取得し、それを伸ばしてロゴの書かれた部分を削除しようとすると、問題が発生する可能性があります。
  • 通常、現在のロゴを取得して、ファビコンとして完全に機能することを期待することはできません。
  • 提供されたスペースのすべてのピクセルをカバーすると、ファビコンの見栄えが良くなります。 スペースがあまりないので、すべてを活用する必要があります square 32×32空間のピクセル。
  • ファビコンでは読みにくいため、すべてのテキストを削除してください。 例外は、主要なロゴ要素が大きな文字である場合です。
  • しっかりとした明るい色を撮影します。 シンプルで漫画的なロゴが最適です。
  • お気に入りのブランドのファビコンを見てください。 オンライン画像がファビコンで確実に表示されるようにするために、彼らは何をしましたか?
  • スペース全体を単色の背景で塗りつぶすか、前景要素を伸ばしてエッジにちょうど触れるように透明な背景を作成することを検討してください。 多くの大きなブランドは、ファビコンの背景が透明であることに気付くでしょう。
  • ICOファイル形式は、小さい画像に適しています。 慣れていない場合は、透明な背景にはPNGを使用し、無地の背景を持つ高解像度のファビコンにはJPGを使用してください。

ファビコンを生成する方法 Shopify ショップ

選択した任意の設計ソフトウェアでファビコンを設計するオプションがあります。 Photoshopを好む場合は、それを使用してください。 GIMPやPixlrのようなフリーソフトウェアが必要な場合は、必要な32×32のサイズに固執する限り、すべてが機能します。

ファビコンを作成するオプションもあります Shopifyのハッチフルロゴと無料のファビコンジェネレータ。 ガイド全体を見る 使用時 ハッチフル ロゴを作成します。

ロゴをダウンロード

ロゴ作成者が作業を行うと、複数のロゴ形式で満たされたファイルが提供されます。そのうちのXNUMXつがファビコンです。

Shopify ファビコンファイル

あなたが作るロゴの多くは ハッチフル (私たちを読む ハッチフルレビュー)ロゴの周りに空白を使用するため、グラフィックがほとんどのスペースをカバーするようにロゴを調整する必要がある場合があります。 一般に、提供されているハッチフルファビコンは、すでに見栄えが良い場合にのみ使用する必要があることがわかりました(スペースの大部分を占め、テキストなどの小さな要素がありません)。

そうでない場合は、PhotoshopやPixlrなどのサードパーティの編集ソフトウェアを使用して、不要な要素の一部を切り取ります。

重要:テキストと空白を切り取るために画像をキャンバス上に拡大する場合は、画像の拡大版を使用する必要があります。 このために、Hatchfulを使用してロゴを生成しましたが、32×32のキャンバス上に伸ばしたときにぼやけが発生したくないため、実際には大きなロゴのXNUMXつ(提供されているファビコンファイルではありません)を使用しました。

編集ソフトウェア内で、幅と高さの両方が32に設定された新しいキャンバスを選択します。

32によって32

新しい画像のレイヤーを作成し、画像を引き伸ばす可能性があるため、画像が32×32のキャンバスよりも大きいことを確認します。 次に、画像をアップロードするか、キャンバスに配置します。

次のスクリーンショットでは、ファビコンデザインを拡大して、フィットすることを確認しています。 square 正しく。 ぼやけていますが、ズームアウトすると見栄えが良くなることはわかっています。

ラージバージョン

ご覧のとおり、Pixlrデザイナーのファビコンのズームアウトバージョンは見栄えがします。 割り当てられたスペースのほとんどをカバーし、明るく単色のアイコンを選択し、小さいテキストの兆候をすべて削除しました。

小さいバージョン

最後のステップは、ファイルをダウンロードすることです。 この時点で、透明なPNGにすることを選択できます。 ただし、このチュートリアルでは、可能な限り鮮明に見えるように、高解像度のJPGを使用しています。 そして、私は無地の背景を持っていてもかまいません。

ダウンロード- Shopify ファビコン

自分に戻って Shopify ダッシュボード。 [オンラインストア]> [テーマ]> [カスタマイズ]をクリックします。

次に、[テーマ設定]> [ファビコン]に移動します。

その新しいファビコンをアップロードし、の[保存]ボタンをクリックします。 Shopify エディタ。

画像プレビュー

繰り返しになりますが、ファビコンをテストして表示する主な方法は、ホームページのWebサイトのURLでタブを開くことです。 ご覧のとおり、ファビコンは見栄えがよく、実際には以前のファビコンよりも少し優れています。これは、提供された32×32のスペース全体を埋めなかったためです。

最終製品- Shopify ファビコン

結論として

A Shopify ファビコンは、サイトのデザインと追加に数分しかかかりませんが、訪問者がどのWebサイトにアクセスしているかを思い出させる素晴らしいものです。 さらに、ブックマークやブラウザの履歴であなたのWebサイトを見つける方法としても役立ちます。これらのセクションを通過するときに、他のサイトの長いリストを検索している可能性が高いからです。

ぼやけたものや判読できないものに甘んじてはいけないことに注意してください Shopify ファビコン画像。 最初のファビコンが正しく表示されない場合、またはテキストを切り取ったり、透明な背景を追加したりする場合は、最初に戻って正しく表示してください。 ファビコンをまったく使用しないことはお勧めできませんが、ファビコンがぼやけているか見づらいと、ブランドがプロフェッショナルでなく、ややばかげているように見えます。

ファビコンの追加について質問がある場合 Shopify、または自分で作成する Shopify ファビコン、下のコメントセクションでお知らせください。

ジョー・ウォーニモント

Joe Warnimontは、eコマースツール、WordPress、ソーシャルメディアに焦点を当てているシカゴを拠点とするライターです。 釣りやヨガの練習をしていないときは、国立公園で切手を集めています(主に子供向けですが)。 ジョーのポートフォリオをチェックしてください 彼に連絡して過去の仕事を見る。