Shopifyのファビコン
Shopify を使用すると、テーマ エディターからファビコンを数秒でアップロードできます。最新の Shopify テーマはすべて、テーマ設定の下に Favicon フィールドを公開しており、Shopify の CDN はストアフロントのすべてのページにアイコンを提供します。まず favicon generator を使用して、512×512 の正方形 PNG を作成します。Shopify は、必要な 32×32 の表示サイズに自動的にサイズ変更します。
ファビコンは、見込み顧客が複数のタブを開いたときに最初に目にするブランド シグナルの 1 つです。 Shopify ストアでは、ファビコンはブラウザーのタブ、ブックマーク バー、アドレス バーに表示されます。鮮明で認識可能なファビコンはブランドの信頼を強化し、買い物客が開いている多数のタブの中からストア タブをすばやく見つけるのに役立ちます。
すべての最新の Shopify テーマ (Dawn、Refresh、およびほとんどのプレミアム テーマ) には、テーマ設定の Theme Editor に Favicon フィールドが含まれています。アクセスするには、Shopify 管理者にログインし、[オンライン ストア] > [テーマ] に移動し、ライブ テーマの横にある [カスタマイズ] をクリックします。左側のサイドバーで、[テーマ設定] (または歯車アイコン) をクリックし、[ファビコン] セクションを探します。
Shopify では、ファビコン フィールドとして 32×32 ピクセルの正方形 PNG をアップロードすることをお勧めします。実際には、512×512 PNG をアップロードすると、Shopify が 32×32 のオリジナルから開始する場合よりも高品質で 32×32 にダウンサンプリングされるため、より鮮明な結果が得られます。常に、手持ちの最大の正方形のソースから開始します。ジェネレーターを使用すると、これが簡単になります。
ファビコンをアップロードした後、Theme Editor の右上隅にある [保存] をクリックします。 Shopify は画像を処理して CDN にアップロードし、数分以内にすべてのストアフロント ページに広めます。テーマを再公開したり、その他のコードを変更したりする必要はありません。
古いテーマまたは大幅にカスタマイズされた Shopify テーマでは、テーマ設定で Favicon フィールドが公開されない場合があります。その場合は、テーマの Liquid コードを直接編集する必要があります。テーマ ファイル エディター ([オンライン ストア] > [テーマ] > [コードの編集]) を開き、theme.liquid ファイルを見つけて、「<head>」セクションを見つけます。 favicon.png をテーマの Assets フォルダーにアップロードした後、`<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` を挿入します。
2.0 テーマ フレームワーク上の Shopify ストアの場合、ファビコンは、Shopify がテーマ設定から自動的に生成する site.webmanifest を通じて管理されます。ストアが Progressive Web App シェルを使用している場合、Shopify のマニフェストにはアプリ アイコンとしてファビコンが含まれます。テーマのファビコンを更新すると、マニフェスト アイコンも自動的に更新されます。追加の JSON 編集は必要ありません。
透明な背景は Shopify ファビコンで正しく機能します。テーマ エディターは、CDN にアップロードするときに PNG アルファ チャネルを保持します。ただし、ロゴの背景が白い場合は、ダークモード ブラウザーのタブでは白いボックスで表示されます。これを回避するには、アップロードする前に、背景を塗りつぶさずにロゴをエクスポートしてください。
複数の Shopify ストア (海外ストアフロントの一般的な設定) を運営している場合は、各ストアのファビコンを個別に設定する必要があります。ファビコンはストアごとの設定であり、Shopify パートナーまたは組織レベルの設定ではありません。各ストアの管理者にログインし、Theme Editor の手順を繰り返します。
キャッシュの無効化により、Shopify でのファビコンの更新が遅れる可能性があります。 Shopify の CDN は、長い TTL でアセットをキャッシュします。ファビコンを変更した後、ブラウザーは何時間も古いファビコンを表示し続ける場合があります。プライベート/シークレット ウィンドウを開いて、キャッシュの干渉なしに更新されたアイコンを確認します。あるいは、ブラウザにハードリフレッシュするように指示します (Windows の場合は Ctrl+Shift+R、Mac の場合は Cmd+Shift+R)。
Shopify は、テーマ テンプレートに apple-touch-icon または Web アプリ マニフェスト リンク タグが含まれていない限り、それらをネイティブに挿入しません。 iOS のホーム画面インストールでページのスクリーンショットではなくロゴを表示したい場合は、オンライン ストア > テーマ > コードの編集 > theme.liquid から apple-touch-icon タグを手動で追加します。 `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | を配置します。 「<head>」セクションのasset_url }}'>`を選択し、180×180 PNGをAssetsにアップロードします。
Shopify Plus ストアの場合、チェックアウト ブランドを使用して、メインのストアフロント ファビコンとは別にチェックアウト フローのファビコンをカスタマイズできます。 Checkout のブランド設定は、[設定] > [Checkout とアカウント] > [カスタマイズ] で設定します。これにより、チェックアウト ページにメイン ストアとは異なるファビコンを表示できるようになり、複数ブランドのセットアップに役立ちます。
Shopify ファビコンが機能していることを確認するには、live favicon tester を使用してストアの URL を入力します。テスターはアイコンがパブリックにアクセスできることを確認し、16、32、および 48 ピクセルでどのようにレンダリングされるかを示します。また、best favicon size をチェックして、どの追加サイズが PWA のインストール エクスペリエンスを向上させるかを理解してください。
Shopify ファビコンの一般的な間違いには、最初に正方形にトリミングせずに長方形のロゴをアップロードする (潰れたアイコンが生成される)、非常に小さな画像をアップロードする (Retina ディスプレイではぼやける)、アップロード後に [保存] をクリックするのを忘れる (明示的に保存するまで変更はコミットされません) などがあります。 favicon generator は、直接 Shopify アップロードできるように、512×512 の適切な正方形の PNG をエクスポートします。
使い方
- 1
512×512の正方形PNGを生成
[favicon generator](tool:favicon-generator)にはロゴやブランドマークを入れてご使用ください。ダウンロード パッケージから 512×512 PNG をエクスポートします。これは Shopify の正しい入力サイズです。
- 2
Theme Editor でテーマを開きます
Shopify 管理者で、[オンライン ストア] > [テーマ] に移動し、ライブ テーマの横にある [カスタマイズ] をクリックします。
- 3
テーマ設定 > ファビコンに移動します
左側のサイドバーで、テーマ設定 (ほとんどのテーマでは下部にある歯車アイコン) をクリックし、ファビコンまたはブランド セクションを探します。正確なラベルはテーマによって異なります。
- 4
PNG をアップロードして保存します
ファビコンアップロードフィールドをクリックし、512×512 PNG を選択して確認します。右上隅にある「保存」をクリックします。 Shopify はアイコンを CDN にアップロードし、すべてのページに広めます。
- 5
シークレット ウィンドウで確認する
プライベート/シークレットブラウザウィンドウを開き、ストアの URL に移動します。新しいファビコンがブラウザー タブに表示されることを確認します。迅速な外部チェックには、[favicon tester](utility:favicon-tester) を使用します。
今すぐ試す
Shopify 対応のファビコンを生成する
ファビコンジェネレーターよくある質問
Shopify のどこにファビコンを追加すればよいですか?+
オンラインストア > テーマ > カスタマイズ > テーマ設定 > ファビコン。正方形の PNG (512×512 を推奨) をアップロードし、「保存」をクリックすると、Shopify がすべてのストアフロント ページにアイコンを自動的に挿入します。
Shopify はどのサイズのファビコンを使用していますか?+
Shopify は、ブラウザーのタブに 32×32 ピクセルでファビコンを表示します。最も鮮明な結果を得るには 512×512 をアップロードします。Shopify は 32×32 にダウンサンプルします。 32×32 より小さいソースはアップロードしないでください。アップロードしないと、ぼやけて見えます。
Shopify ファビコンがぼやけたり伸びたりして見えるのはなぜですか?+
おそらく正方形ではない画像、または非常に小さなソースをアップロードしたと考えられます。アップロードする前にロゴを完全な正方形にトリミングし、少なくとも 256 × 256 ピクセルから始めてください。 [favicon generator](tool:favicon-generator) は、Shopify に対応した 512×512 の正方形 PNG を自動的に生成します。
新しい Shopify ファビコンが表示されないのはなぜですか?+
ブラウザーと CDN キャッシュにより更新が遅れます。シークレット/プライベート ウィンドウを開いてストア URL に移動すると、キャッシュの干渉なしに更新されたファビコンが表示されます。通常のブラウジングで古いアイコンがまだ表示される場合は、CDN キャッシュの有効期限が切れるまで数時間待ちます。
apple-touch-icon を Shopify ストアに追加できますか?+
はい、ただし手動でコードを編集する必要があります。 180×180 apple-touch-icon.png をテーマのアセット フォルダーにアップロードし、`<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | 「<head>」セクション内のtheme.liquidのasset_url }}'>`。
Shopify は SVG ファビコンをサポートしますか?+
組み込みの Theme Editor ファビコンのアップロードは SVG を受け入れません。 SVG ファビコンを使用するには、theme.liquid にリンク タグを手動で追加します。 `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | SVG を Assets フォルダーにアップロードした後、asset_url }}'>` を実行します。
Shopify ファビコンを変更するには開発者が必要ですか?+
いいえ。Theme Editor (オンライン ストア > テーマ > カスタマイズ > テーマ設定 > ファビコン) を使用すると、コードなしで 2 分以内に新しいファビコンをアップロードして保存できます。開発者アクセスは、SVG または apple-touch-icon の追加にのみ必要です。