Shopifyカスタマイズの最新情報は「10ca」にて紹介しております。
【Shopify】FaviconをSVGで出力
新テーマの「Dawn（ドーン）」を検証し始めてから、Favicon（ファビコン）設定がないのに気付きました。
調べてみたら、Githubで公開されているDawnにはすでに機能が追加されているようですが、テスト環境のDawnはすでにいろいろいじってしまった為、テーマの再インストールは無〜理〜。
ファビコン設定の機能追加はそれほど難しくないので、追加カスタマイズすることにしました。
基本的にはGithubの更新履歴通りにファイルを操作すれば、ファビコン機能は搭載されます。
しかし！
他のテーマもそうですが、基本的には32×32pxのPNGファイルを設定するだけですよね。
せっかくなので「Apple touch icon」や「SVGアイコン」も実装して今どきのサイトっぽくしたいところ。
一時は、Windows用の設定とかめっちゃ多くのファイルを用意しなくてはいけなかったのですが、現在のトレンドはこんなにシンプルなんだそうです。
<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
How to Favicon in 2021: Six files that fit most needs
Evil Martians
この方法なら6つのファイルを作るだけなので実装も簡単ですね。
これをベースにDawnへ実装していきたいと思います。
1. アイコンをデザイン
IllustratorやPhotoshopなどで各サイズのアイコンファイルを作成し、指定のサイズで書き出します。
一番大きい512pxのPNGを1つだけ作って、Shopifyののimg_urlフィルターでサイズを縮小する事も可能ですが、縮小するとぼやけてしまうので、キレイに表示させたいなら必ず全サイズを作成してください。
作成するのは「32×32px」「180×180px」「192×192px」「512×512px」のPNGと、「32×32px」のSVG、合計5種類です。
ファイル名は何でも構いませんが、今回は上記ソースに合わせていきますので以下のファイルが出来上がります。
- favicon.png
- icon.svg
- apple-touch-icon.png
- icon-192.png
- icon-512.png
各ファイルの用途説明は、本編に関係ないので省略させていただきます。上記リンクをお読みください。
2. icoファイルを作成
「1」で作成した「favicon.png」をicoファイルに変換し「favicon.ico」を作成します。
参考サイトではGIMPというエディタで作成する方法や、ターミナルで変換する方法が書かれていますが、Photoshopのプラグインを使ってico形式で書き出す方法など、作成方法は多々あります。
他にも「favicon 作成」で検索すれば、icoに変換できるウェブサービスがたくさんあるので、お好みの方法で作成してください。
3. svgファイルを編集
今どきのファビコンといえば、ダークモード対応のSVGアイコン。
PNG画像よりもはるかにキレイなのに加え、ブラウザがダークモード時にアイコンカラーが変更できるというスグレモノ。
必要なければこのステップは省略して構いませんが、アイコンカラーが白や黒だった場合はブラウザがダークモードになった際に、せっかくのファビコンが見づらくなってしまうので、設定しておくのをおすすめします。
「1」で作成した「icon.svg」をテキストエディタで開いて、<style>タグを追記するのみです。
複雑なカラー構造の場合はちょっと面倒ですが、単純な白黒変換なら以下のソースを<svg>開始タグ直後に追記するのみで対応できます。
<style>path{fill:black;}@media(prefers-color-scheme:dark){path{fill:white;}}
こちらも上記リンクに書かれておりますので、詳細は省略させていただきます。
4. manifest.webmanifestを作成
Webアプリマニフェストというらしく、ざっくり言うと「192×192px」はホーム画面用、「512×512px」はPWA読み込み中のスプラッシュ画面用で、それを保存するJSONファイルとのことです。
今回はLiquidファイルにして、テーマ設定で登録した画像が反映されるようにします。
{
"icons": [
{ "src": "{{ settings.webmanifest_icon | img_url: "192x192"}}", "type": "image/png", "sizes": "192x192" },
{ "src": "{{ settings.webmanifest_splash | img_url: "512x512"}}", "type": "image/png", "sizes": "512x512" }
]
}
作り方がわからない方は、こちらからダウンロードしてください。
5. ファイルをテーマにアップロード
テーマ編集の「新しいassetを追加する」より、Assetsに以下の3ファイルをアップロードします。
- favicon.ico
- icon.svg
- manifest.webmanifest.liquid
icoファイルとsvgファイルは画像アップローダーに対応していない為、Assetsへのアップロードとなります。
6. テーマ設定を追記
Configの「settings_schema.json」を開き、一番下に以下のハイライト部分を追記します。
},
{
"name": "ファビコン",
"settings": [
{
"type": "image_picker",
"id": "apple_touch_icon",
"label": "Apple touch icon",
"info": "180×180px"
},
{
"type": "image_picker",
"id": "webmanifest_icon",
"label": "Webmanifest icon",
"info": "192×192px"
},
{
"type": "image_picker",
"id": "webmanifest_splash",
"label": "Webmanifest splash image",
"info": "512×512px"
}
]
}
]
これでテーマ設定にファビコンの画像アップローダーが表示されるようになりました。
多言語対応は長くなるので省略させていただきます。
7. favicon.liquidを作成
「新しいsnippetを追加する」より、Snippetsに「favicon.liquid」を作成し以下のソースを入れてください。
<link rel="icon" href="{{ 'favicon.ico' | asset_url }}">
<link rel="icon" href="{{ 'icon.svg' | asset_url }}" type="image/svg+xml">
{%- if settings.apple_touch_icon -%}
<link rel="apple-touch-icon" href="{{ settings.apple_touch_icon | img_url: '180x180' }}">
{%- endif -%}
{%- if settings.webmanifest_icon and settings.webmanifest_splash -%}
<link rel="manifest" href="{{ 'manifest.webmanifest' | asset_url }}">
{%- endif -%}
8. テーマにファビコンをセット
Layoutの「theme.liquid」を開き、<head>内に以下のLiquidコードを追記します。
{%- render 'favicon' -%}
「7」のソースを直接追記しても構いませんが、ソースをスッキリさせる為にこの方法で実装しています。
9. 画像をアップロード
最後にカスタマイザーのテーマ設定より以下の3ファイルをアップロードします。
- apple-touch-icon.png
- icon-192.png
- icon-512.png
これでファビコンの実装は完了です。
20年以上ウェブに携わってますが、ファビコンの仕様やトレンドはどんどん変わってきました。
当初は16px内でドット描画してましたからね〜