![[Shopify] ファビコンとスマホ用ウェブクリップアイコンを追加する方法](https://cdn.sanity.io/images/sonintul/production/9f248e702f9d796945fc73445262bc64d8496ae7-1200x630.png?rect=40,0,1120,630&w=1200&h=675&fit=max&auto=format)
・ファビコン以外に、スマホ用のウェブクリップアイコンも追加したい
・Windows用アイコンを追加したい
そんな場合のカスタマイズ方法をまとめました。
Shopifyでは、デフォルトでファビコンを設定できます。
ストアにファビコンを追加する · Shopify ヘルプセンター
ただ、iPhoneのSafariやホーム画面のアイコン、Windows用のアイコンなどは設定されません。そこで、今回はファビコン以外のアイコンをショップに簡単に追加する方法をまとめてみました。
Shopifyに追加するファビコン・スマホ用ウェブクリップアイコン画像を作成する
元となる画像を作成する
まず元となる画像を作成します。縦横260px以上の正方形で作成してください。 今回は例として以下を作成しました。
複数のアイコンを自動生成する
次に、各種サイズを1つ1つ作成するのは大変なので、自動生成してくれるサイトでアイコンに関するファイルを一括生成します。 いくつかありますが、今回は以下を使用します。 Favicon Generator for perfect icons on all browsers
まず作成した画像を右の「Select your Favicon image」からアップロードします。
以下のような感じで、プレビューも表示してくれるので便利です。
背景色など変更したい部分があれば変更し、最後に一番下の「Generate your Favicons and HTML code」を押します。
画像が作成されたら、「Favicon package」ボタンを押してダウンロードすれば完了です。
Shopifyにファビコン・スマホ用ウェブクリップアイコンを読み込む
先ほどダウンロードしたファイルを解凍し、その中の「browserconfig.xml」のファイル名を、「browserconfig.xml.liquid」に変更します。 そしてその解凍したファイル全てを、assetsフォルダにコピーします。 さらに、snippets フォルダ以下に、「favicons.liquid」というファイルを作成し、以下のコードを入れて保存します。<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | asset_url }}">
<link rel="manifest" href="{{ 'site.webmanifest' | asset_url }}">
<link rel="mask-icon" href="{{ 'safari-pinned-tab.svg' | asset_url }}" color="#5bbad5">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%} {% include 'favicons' %}