を追加する方法 Shopify あなたのファビコン Shopify オンラインショップ

のアイデンティティ あなたのeコマースストア ロゴ、サイトの色、 マーケティング資料。 このアイデンティティは、ブランド全体を強化し、顧客に健全な思い出を与え、ブランドのイメージや色を見たときに快適さと信頼感を呼び起こします。

サイズは小さいですが、ファビコンはそのブランド戦略とも結びついています。 このチュートリアルでは、ファビコンを作成してファビコンに追加する方法を説明します。 Shopify 店舗、オンラインの外観を完成させ、顧客が訪れたときに店舗を認識しやすくします。

とは Shopify ファビコン？

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

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

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

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

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

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

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

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

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

ファビコンを追加する方法 Shopify ストア – クイックステップガイド

前述のように、サイトを実行するとき Shopify 自動的に追加されます Shopify ロゴをサイトのファビコンとして使用します。 それ自体に問題はありませんが、独自のロゴを含めた方がはるかにプロフェッショナルであり、ブランド志向です。 従う必要がある手順は次のとおりです。

ステップ 1: Shopify ダッシュボード

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

ステップ 2: テーマ設定に移動する

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

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

ステップ 3: ファビコンボタンを選択します

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

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

ステップ 4: ファビコンをアップロードする

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

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

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

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

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

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

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

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

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

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

ロゴ作成者が作業を完了すると、複数のロゴで満たされたファイルが提供されます formatそのうちの XNUMX つは Favicon です。

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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