すべてのShopifyストアには汎用的なデフォルトのファビコンが付いてきます。 これを自分のブランドアイコンに置き換えるのは、最も手軽に得られる信頼の向上の 1つです。Shopifyはテーマエディタでこれを簡単にしており、コードは不要です。 手順を紹介します。
簡単な方法：テーマ設定からアップロード
- まず、ロゴから32×32（最大180×180）のPNGを生成します。
- Shopify管理画面で Online Store → Themes に進みます。
- 公開中のテーマの横にある Customize をクリックします。
- テーマエディタのサイドバーで Theme settings（上部の歯車アイコン）を クリックします。
- Favicon セクションを見つけ、Select をクリックして PNGをアップロードします。
- Save をクリックします。
Shopify対応のファビコンPNGが必要ですか？Favicon.one にロゴをアップロードすれば、 Shopifyで必要になりうる全サイズ入りのパッケージをダウンロードできます。
Shopifyファビコンのサイズ要件
- Shopifyは表示サイズとして 32×32のPNG を推奨しています。
- より大きい正方形の画像（最大180×180）をアップロードでき、Shopifyがリサイズします。
- ブラウザタブできれいに見えるよう、透過付きのPNG を使ってください。
- ファイルサイズは1MB未満に保ちます。
Google検索でファビコンが違って見える
よくある不満：ブラウザタブでは正しく見えるのに、Googleの検索結果では 違って見える（または表示されない）。これは通常キャッシュです。 Googleは独自のスケジュールでファビコンを再クロールし、数日から数週間かかる ことがあります。対策は次のとおりです。
- Google Search Consoleでホームページの再インデックスをリクエストする。
- ファビコンが最低48×48の正方形であることを確認する（48の倍数が理想）。
<link rel="icon">タグがストアのHTMLにあることを確認する。
手動での方法：テーマコードを編集
テーマにファビコン設定がない場合は、手動で追加できます。
- Content → Files（または Settings → Files）からファビコンファイルをアップロードし、URLをコピーします。
- Online Store → Themes → Actions → Edit code に進みます。
layout/theme.liquidを開きます。<head>タグ内に以下を追加します。
<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}">
<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">（ファイルをテーマの assets/ フォルダに置いた場合はShopifyのasset_url フィルタを使うか、Content → Filesの完全なファイルURLを 貼り付けてください。）
チェックアウトのファビコン
Shopify Plusでは、checkout.liquid レイアウトでチェックアウトの ファビコンをカスタマイズできます。通常プランでは、テーマ設定で設定すれば チェックアウトがストアのファビコンを自動的に使います。
Shopifyのファビコンが表示されない
- キャッシュをクリア。 Shopify CDNはファビコンをキャッシュします。数分待つか、別のブラウザでプレビューしましょう。
- 誤ったファイル形式。 ShopifyのアップローダーはPNGを優先します。先にICO/JPGを変換してください。
- テーマの上書き。 一部のカスタムテーマは
theme.liquidにファビコンをハードコードしています。そこを確認してください。 - 正方形でない画像。 アップロード前に1:1にクロップしてください。
一般的なチェックリストは「ファビコンが表示されない？」をご覧ください。
Shopifyストア用の、きれいな透過PNGファビコンを生成しましょう。Favicon.one で無料です。