スマホのホーム画面に追加したときに表示されるファビコンを自前の画像にしたい

Topic summary

ユーザーがスマートフォン(iPhone・Android)のホーム画面にショップページのショートカットを追加した際、カスタムロゴをファビコンとして表示させたいと質問しています。

提案された解決方法:

  • アセットまたはファイルに画像データをアップロード
  • theme.liquidの<head>タグ内に以下のコードを設置:
    • アセット参照の場合:<link rel="apple-touch-icon" href="{{ '画像ファイル名.png' | asset_url }}" sizes="180x180">
    • ファイル参照の場合:<link rel="apple-touch-icon" href="{{ '画像ファイル名.png' | file_url }}" sizes="180x180">

現状:
質問者が指示通りに設定を試みたものの、うまく機能していない状況です。画像をShopifyのファイルにアップロードするとjpegに自動変換される点や、スマホで試してもファビコン画像が変わらないという問題が報告されています。さらなるサポートを求めている段階で、解決には至っていません。

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.

iPhoneやアンドロイド端末のホーム画面にショップページのショートカットを追加したときに表示されるファビコンに、予め用意したロゴ等の画像を使いたいのですが、具体的にどのようにすればよろしいでしょうか? 他の方の質問で「head要素内にlink要素を使って設置します。コード例として

」という解答がありましたが、liquidに詳しくないため、どこにどのように設置するかをもう少し分かりやすく教えていただけると助かります。ちなみに当方のテーマはdawnとなります。

Jy3さま

ご質問拝見しました。Shopifyのコード編集はどこから始めていいか迷いますよね、、、

アップルタッチアイコンの設定は以下手順で可能かと存じます。

  1. アセットもしくはファイルに画像データをアップロード

  2. theme.liquidのタグ内に以下コードを設置

アセットから参照する場合:

ファイルから参照する場合:

参考:https://qiita.com/eijiSaito/items/70aad4d59cc5427981e1

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

ご担当者さま
この度はご丁寧にご指導くださり誠にありがとうございました。
ご指示の通り(だと思います)設置してみたのですが上手くいきません。

[image: アイコン.jpg]
スマホで試してみたのですがファビコン画像は変わりません。
ちなみにショップファイに画像をアップロードすると勝手にjeg変換されてしまうようです。
お手数ですがよろしくお願いいたします。