のアイデンティティ あなたのeコマースストア ロゴ、サイトの色、 マーケティング資料。 このアイデンティティは、ブランド全体を強化し、顧客に健全な思い出を与え、ブランドのイメージや色を見たときに快適さと信頼感を呼び起こします。
サイズは小さいですが、ファビコンはそのブランド戦略とも結びついています。このチュートリアルでは、ファビコンを作成してファビコンに追加する方法を説明します。 Shopify 店舗、オンラインの外観を完成させ、顧客が訪れたときに店舗を認識しやすくします。
この記事で
とは Shopify ファビコン?
A Shopify ファビコン、またはそれに関するファビコンは、Webサイト名の横のブラウザタブに表示されるWebサイトの小さなアイコンです。
ブラウザのアドレスバーは、サイトのファビコンを表示するための最も一般的な領域ですが、次の場所にも表示されます。
- ツールバーアプリ
- ブックマーク
- 履歴結果
- 検索バー
- ソーシャルメディアで共有される場合もあります
基本的に、ブラウザーが Web サイトへのリンクを表示する必要があり、他のコンテンツを表示する余地があまりない場合はいつでも、通常のフルサイズのロゴを Favicon に置き換えます。
デフォルトでは、 Shopify 追加します Shopify ファビコンのロゴなので、変更する必要があります。
良いファビコンは、多くの場合、ロゴの小さいバージョンですが、表示されるようにし、割り当てられたすべてのスペースを占有し、Webサイト名の横に少し色を追加するために、ロゴが少し異なる場合があります。
デフォルトでは、すべてのブラウザが 32×32 ピクセルのファビコンをサポートしています。 これはかなり小さな画像ですが、いくつかのオンライン ジェネレーターの助けを借りて、独自の画像を作成できます Shopify ウェブサイトのファビコン。 また、大きな画像はとにかく縮小されるため、必ずしも正確に 32×32 にする必要はありません。
ファビコンは、上のオンラインストアにとってかなり意味があります Shopify 簡単に追加できるため、オンライン販売者としてのブランド アイデンティティを強化することが重要です。 また、SEOに役立つと主張する人もいます。
ファビコンをに追加する方法の詳細については、読み続けてください Shopify 保管してください。
ファビコンを追加する方法 Shopify ストア – クイックステップガイド
前述のように、サイトを実行するとき Shopify 自動的に追加されます Shopify ロゴをサイトのファビコンとして使用します。それ自体に問題はありませんが、独自のロゴを含めた方がはるかにプロフェッショナルであり、ブランド志向です。従う必要がある手順は次のとおりです。
ステップ 1: Shopify ダッシュボード
したがって、あなたのに行きます Shopify ダッシュボードをクリックし、[販売チャネル]の下の[オンラインストア]をクリックします。
ステップ 2: テーマ設定に移動する
テーマに移動し、現在のテーマの横にある[カスタマイズ]ボタンをクリックします。 設定はテーマごとに異なりますが、最新のものはすべて Shopify テーマには、ファビコンを変更するセクションがあります。
Shopify カスタマイザーで、左側のリストの一番下までスクロールし、[テーマの設定]をクリックします。
ステップ 3: ファビコンボタンを選択します
新しいセクションで、[ファビコン]ボタンを見つけて選択します。
これにより、Select Image または Explore Free Images のボタンが表示されます。 あなたのロゴと一致する無料の画像があるとは思えないので、[画像の選択] をクリックして、コンピューターからカスタム画像をアップロードすることをお勧めします。
ステップ 4: ファビコンをアップロードする
ファビコンファイルを選択してアップロードします Shopify.
その後、Favicon アイコンのプレビューが表示されます。 変更を永続的にするには、[保存] ボタンを選択します。 Shopify.
あなたを表示するには Shopify ファビコンの動作については、Webサイトのフロントエンドに移動し、現在のブラウザタブを確認してください。 サイトタイトルの横にファビコンが表示されます。
ファビコンを作成するためのヒント
小さなアイコンを生成するのは簡単に思えますが、顧客がサイトにアクセスするたびに Favicon が表示されることを考えると、適切に作成することが重要です。 また、ぼやけている、またはスペース全体を埋めていないファビコンを作成するのも簡単です。ファビコンは目に見えないため、ファビコンの目的を無効にします。
問題を解決するために、ここにあなたを作成するためのいくつかのヒントがあります Shopify ファビコン:
- 32×32 より大きいデザインを開始し、必要に応じて縮小します。 小さい画像をスペースに引き延ばそうとすると、画像がぼやけてしまいます。 たとえば、Hatchful から 32×32 の画像を取得し、それを引き延ばしてロゴの文字部分を削除しようとすると、問題が発生する可能性があります。
- 通常、現在のロゴをファビコンとして完全に機能させることは期待できません。
- ファビコンは、提供されたスペースのすべてのピクセルをカバーすると見栄えがします。 スペースがあまりないので、すべてを利用する必要があります square 32×32空間のピクセル。
- Favicon では読みにくいため、すべてのテキストを削除します。 例外は、メインのロゴ要素が大文字の場合です。
- しっかりとした明るい色を撮影します。 シンプルで漫画的なロゴが最適です。
- お気に入りのブランドのファビコンを見てください。 オンライン画像がファビコンで確実に表示されるようにするために、彼らは何をしましたか?
- スペース全体を単色の背景で埋めるか、前景要素を伸ばして透明な背景を作成し、端に触れるようにすることを検討してください。 多くの大規模なブランドでは、ファビコンの背景が透明になっていることに気付くでしょう。
- ICO ファイル format 小さな画像に適しています。 慣れていない場合は、透明な背景に PNG を使用するか、無地の背景を持つ高解像度の Favicon に JPG を使用してください。
ファビコンを生成する方法 Shopify オンラインショップ
選択した任意のデザイン ソフトウェアで Favicon をデザインするオプションがあります。 Photoshop の方が好きな場合は、それを使用してください。 GIMP や Pixlr などのフリー ソフトウェアが必要な場合は、必要な 32 × 32 のサイズに固執する限り、それらはすべて機能します。
ファビコンを作成するオプションもあります Shopifyのハッチフル ロゴと無料のファビコン ジェネレーター。 ガイド全体を見る 使用時 ハッチフル ロゴを作成します。
ロゴ作成者が作業を完了すると、複数のロゴで満たされたファイルが提供されます formatそのうちの XNUMX つは Favicon です。
あなたが作るロゴの多くは ハッチフル (私たちを読む ハッチフルレビュー) ロゴの周りに空白を使用するため、グラフィックがほとんどの領域を覆うように調整する必要がある場合があります。 一般に、提供されている Hatchful ファビコンが適切に表示されている場合にのみ使用する必要があることがわかりました (ほとんどのスペースが埋まっていて、テキストなどの小さな要素がありません)。
そうでない場合は、Photoshop や Pixlr などのサードパーティの編集ソフトウェアを使用して、不要な要素を切り取ってください。
重要: キャンバス上に画像を引き延ばしてテキストと余白を切り取る場合は、より大きなバージョンの画像を使用する必要があります。 このために、Hatchful を使用してロゴを生成しましたが、32×32 のキャンバスに引き伸ばすときにぼやけたくないので、実際には (提供された Favicon ファイルではなく) 大きなロゴの XNUMX つを使用しました。
編集ソフトウェア内で、幅と高さの両方が32に設定された新しいキャンバスを選択します。
新しい画像のレイヤーを作成し、画像を引き伸ばす可能性があるため、画像が32×32のキャンバスよりも大きいことを確認します。 次に、画像をアップロードするか、キャンバスに配置します。
次のスクリーンショットでは、ファビコンデザインを拡大して、フィットすることを確認しています。 square ちゃんと。 ぼやけていますが、縮小すると見栄えがよくなります。
ご覧のとおり、Pixlr デザイナーの Favicon のズームアウト バージョンは見栄えがよくなります。 割り当てられたスペースの大部分をカバーし、明るく単色のアイコンを選択し、小さいテキストの兆候をすべて削除しました。
最後のステップは、ファイルをダウンロードすることです。 この時点で、透過 PNG にすることを選択できます。 ただし、このチュートリアルでは、できるだけ鮮明に見えるように、高解像度の JPG を使用しています。 また、無地の背景でもかまいません。
自分に戻って Shopify ダッシュボード。 [オンラインストア]> [テーマ]> [カスタマイズ]をクリックします。
次に、[テーマ設定]> [ファビコン]に移動します。
その新しいファビコンをアップロードし、の[保存]ボタンをクリックします。 Shopify エディタ。
繰り返しますが、Favicon をテストして表示する主な方法は、ホームページの Web サイト URL を含むタブを開くことです。 ご覧のとおり、Favicon はうまく表示され、以前の Favicon よりも実際には少し優れています。提供された 32×32 のスペース全体を埋めていないことがわかります。
まとめ
A Shopify ファビコンは、デザインしてサイトに追加するのに数分しかかかりませんが、訪問者がどの Web サイトにアクセスしているかを思い出させる素晴らしいものです。 さらに、人々がブックマークやブラウザの履歴であなたのウェブサイトを見つける方法としても機能します。これらのセクションを通過するときに、他のサイトの長いリストを検索する可能性が高いためです.
ぼやけたものや判読できないもので満足してはいけません。 Shopify ファビコン画像。 最初の Favicon が正しく表示されない場合や、テキストを切り取ったり、透明な背景を追加したりしたい場合は、最初に戻って正しく設定してください。 ファビコンをまったく表示しないのは得策ではありませんが、ファビコンがぼやけていたり、見づらかったりすると、ブランドがプロらしくなく、ばかげたものに見えてしまいます。
ファビコンの追加について質問がある場合 Shopify、または自分で作成する Shopify ファビコン、下のコメントセクションでお知らせください。
コメント 0応答