iPhoneやアンドロイド端末のホーム画面にショップページのショートカットを追加したときに表示されるファビコンに、予め用意したロゴ等の画像を使いたいのですが、具体的にどのようにすればよろしいでしょうか? 他の方の質問で「head要素内にlink要素を使って設置します。コード例として
」という解答がありましたが、liquidに詳しくないため、どこにどのように設置するかをもう少し分かりやすく教えていただけると助かります。ちなみに当方のテーマはdawnとなります。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に自動変換される点や、スマホで試してもファビコン画像が変わらないという問題が報告されています。さらなるサポートを求めている段階で、解決には至っていません。
Jy3さま
ご質問拝見しました。Shopifyのコード編集はどこから始めていいか迷いますよね、、、
アップルタッチアイコンの設定は以下手順で可能かと存じます。
アセットから参照する場合:
ファイルから参照する場合:
参考:https://qiita.com/eijiSaito/items/70aad4d59cc5427981e1
ご参考になりましたら幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 渡邉
ご担当者さま
この度はご丁寧にご指導くださり誠にありがとうございました。
ご指示の通り(だと思います)設置してみたのですが上手くいきません。
[image: アイコン.jpg]
スマホで試してみたのですがファビコン画像は変わりません。
ちなみにショップファイに画像をアップロードすると勝手にjeg変換されてしまうようです。
お手数ですがよろしくお願いいたします。