FROM CACHE - jp_header

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

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

jy3
訪問者
2 0 0

iPhoneやアンドロイド端末のホーム画面にショップページのショートカットを追加したときに表示されるファビコンに、予め用意したロゴ等の画像を使いたいのですが、具体的にどのようにすればよろしいでしょうか? 他の方の質問で「head要素内にlink要素を使って設置します。コード例として<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="./images/android-touch-icon.png" sizes="192x192">」という解答がありましたが、liquidに詳しくないため、どこにどのように設置するかをもう少し分かりやすく教えていただけると助かります。ちなみに当方のテーマはdawnとなります。

2件の返信2

株式会社フルバランス
Shopify Partner
1537 549 697

Jy3さま

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

 

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

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

2. 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">

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

 

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

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

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

フルバランス 渡邉

 

 

 

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
jy3
訪問者
2 0 0
ご担当者さま
この度はご丁寧にご指導くださり誠にありがとうございました。
ご指示の通り(だと思います)設置してみたのですが上手くいきません。

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