Shopify

[Shopify] ファビコンとスマホ用ウェブクリップアイコンを追加する方法

・ファビコン以外に、スマホ用のウェブクリップアイコンも追加したい
・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">

最後の2行のカラーコードは、先ほどアイコンファイルをダウンロードした画面、

に表示されていたコードのカラーに変更してください。

さいごに、「layout/theme.liquid」ファイルを開き、

  {%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

の下あたり(出なくても良いですがhead タグ内)に、

  {% include 'favicons' %}

を追加してください。

これで、各種アイコンが読み込まれているはずですので、先ほどのサイトのFavicon checkerで確認してください。

以上です!

ABOUT ME
toru
toru
フリーランステクニカルディレクター・UI/UXデザイナー。 Web制作会社10年・フリーランス6年の経験をもとにWebサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信していきます。