Shopifyで作ったお店にファビコンを設置する方法を解説します。Shopifyストアのファビコンはテーマ管理画面の「カスタマイズ」から簡単に変更することができます。
またファビコンの最適なサイズやファビコンを作成できる無料ツールについてもまとめてみたのでぜひチェックしてみてください。
Shopifyでファビコンを設置する方法
Shopifyにファビコンを追加する方法は以下の2つの方法があります。
- テーマのカスタマイズ画面から設置
- テーマに直接ファビコンのコードを設置
カスタマイズ画面から行う方法は画像をアップロードするだけ。基本はこちらで大丈夫ですが、テーマに直接コードを設置することもできます。
それぞれやり方を解説します。
テーマのカスタマイズ画面から設置
まずはShopifyのメニューから「オンラインストア」を選択してテーマ管理画面に移動します。
テーマ管理画面に移動したら、使用中テーマの「カスタマイズ」ボタンでテーマの編集画面を開きます。
テーマの編集画面に入ったら左下の「テーマ設定」でテーマの設定パネルを表示します。
テーマ設定パネルのメニュー一覧から「ファビコン」を選んで「画像を選択」ボタンを押して画像をアップロードしてください。
アップロードできたらテーマ編集画面の右上にある「保存する」ボタンを押して変更内容を保存すればファビコンの追加完了です。
テーマに直接ファビコンのコードを設置
もう1つの方法はテーマのコードに直接ファビコンのコードを設置する方法です。まずはファビコン用画像をアップロードします。
ファビコンの画像はShopify管理画面のトップページの左下にある「設定」からショップの設定画面を開き、左側のメニュー一覧から「ファイル」を選択します。
ファイルの管理画面が表示されたら右上の「ファイルをアップロード」からファビコン用画像をアップロードしてください。
画像のアップロードができたら次はテーマのコードを編集します。
テーマの管理画面に戻って「アクション」を押してドロップダウンメニューを開き、「コードを編集」でテーマのソースコードの編集画面に移動します。
コードの編集画面から「Layout」フォルダの「theme.liquid」を開きます。
Shopifyのテーマはファビコン用のコードがすでに設置されていることがほとんどなので設置済みのコードを編集すればファビコンを表示できます。
テーマからアップロードした画像ファイルにアクセスするにはfile_img_urlというフィルターを使用します。
<!-- 変更前 -->
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
<!-- 変更後 -->
<link rel="icon" type="image/png" href="{{ favicon.png | file_img_url: width: 32, height: 32 }}">コードの変更ができたら編集画面の右上にある「保存する」ボタンを押して変更内容を保存してください。
これで作業完了です。
ファビコン設置してもファビコンが表示されない！
設置作業ができてもファビコンが表示されない場合は以下のことを確認してみてください。
- ブラウザのキャッシュをクリアしてみる
- 使用しているテーマにファビコンを設置するコードがあるか確認する
- コードを変更した場合、正しくコードを書けているかを確認する
- コードに書いた画像名がアップロードしたものと同じになっているかを確認する
これで問題はほぼ解決するはずです。
完全無料！Shopify向けファビコンの作り方
ファビコンの作成方法やファビコンを作れるツールなどについて解説しておきます。
ファビコンのサイズや形は？
ファビコンのサイズは32pxx32pxとなっていますが、テーマのコードが正しく設置されている場合はそれ以外のサイズでも問題ありません。ただし正方形になっているようにしてください。
あと、背景が角丸や円になっていても大丈夫です。ブラウザのタブやブックマークで表示したときにいけてる感じになっていればOKです。
ファビコンの拡張子は？
ファビコンの拡張子は.icoを使ってましたが、Shopifyでは.pngでも問題なく表示されます。
pngならデザインツールで作成したものをそのまま使えるのでicoに変換するツールなどは不要です。
ファビコンの作り方は？
ファビコン自体はただの画像なのでPhotosopやAdobeXDなどのデザインツールで作成できます。
無料ツールで作る場合はFigmaがおすすめ。Webデザインで最近よく使われるようになったツールです。
おさらい
Shopifyのショップにファビコンを追加する方法をざっくりおさらいしておきましょう。
- Shopifyのファビコンはカスタマイズ画面から追加する
- テーマに直接コードを書いてもOK
- ファビコンのサイズは32pxx32pxだけど正方形ならなんでもOK
- ファビコンは無料のデザインツールで簡単に作れる！
ファビコンはドメインと並んでショップの顔になる重要な要素です。ブックマークしたときもアイコンが表示された方がわかりやすいですよね。