FaviconをSVG出力するカスタマイズ

はじめに Shopifyテーマのほとんどが、テーマ設定にて32×32pxのPNGファイルをアップロードするだけの仕様です。 せっかくなので、iOSやAndroidのホームアイコンも欲しいですし、モダンブラウザ用のSVGアイコンにも対応させたいですね。 一時はWindows用のアイコンが多くて、相当なアイコンをを用意しなくてはいけなかったのですが、現在のトレンドはこんなにシンプルなんだそうです。 // 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 2023: Six files that fit most needs icoファイルは古いIEなどのレガシーブラウザ用なので、IE非推奨のShopifyに必要かは疑問ですが、とりあえずおまじない程度に入れておきましょう。 アイコンをデザイン IllustratorやPhotoshop、XDなどで各サイズのアイコンファイルを作成し、指定のサイズで書き出します。 一番大きい512pxのPNGを1つだけ作って、Shopifyののimg_urlフィルターでサイズを縮小する事も可能ですが、縮小するとピクセルがボケてしまうので、キレイに表示させたいなら全サイズを作成してください。 作成するのは合計5種類。ファイル名は何でも構いませんが、本件では上記ソースに合わせていきますので以下のファイルを作成します。 favicon.png（32×32px） icon.svg（32×32px） apple-touch-icon.png（180×180px） icon-192.png（192×192px） icon-512.png（512×512px） 「favicon.png」と「icon.svg」はサイズが同じなので、同じデザインであれば共通のアートボードで作成しても構いません。 デザインができましたらこれらを全てPNG形式で書き出し、32×32pxのアイコンのみ、別途SVG形式で書き出します。 icoファイルを作成 先程作成した「favicon.png」をicoファイルに変換し「favicon.ico」を作成します。 参考サイトではGIMPというエディタで作成する方法や、ターミナルで変換する方法が書かれていますが、Photoshopのプラグインを使ってico形式で書き出す方法など、作成方法は多々あります。 Macの場合は「プレビュー」で開き「Microsoftアイコン」で書き出すのが簡単です。フォーマットに「Microsoftアイコン」が無い場合は、⌥を押しながらフォーマットのプルダウン操作で出現します。 他にも「favicon 作成」で検索すれば、icoに変換できるウェブサービスがたくさんあるので、お好みの方法で作成してください。 svgファイルを編集 今ドキのファビコンといえば、ダークモード対応のSVGアイコン。PNG画像よりもはるかにキレイなのに加え、ブラウザがダークモード時にアイコンカラーが変更できるというスグレモノ。 必要なければこのステップは省略して構いませんが、アイコンカラーが黒っぽい色だった場合はブラウザがダークモードの際に、ファビコンが見づらくなってしまうので、設定しておくのをお勧めします。 まずは作成した「icon.svg」をエディタで開きます。 複雑なカラー構造の場合はちょっと面倒ですが、単純な白黒変換なら以下の様に タグ内を編集するのみで対応できます。 .a{fill:#000;}.b{fill:#fff;}@media(prefers-color-scheme:dark){.a{fill:#fff;}.b{fill:#000;}} ダークモードにした際のカラー設定をメディアクエリ（@media(prefers-color-scheme:dark)）で指定します。 HTMLやCSSを理解されている方なら、それほど難しくはない作業です。 完成したSVGファイルを「新しいアセットを追加する」よりアップロードします。併せて「favicon.ico」もアップロードしてください。 svgとicoはカスタマイザーの画像アップローダーに対応していない為、アセットへのアップロードとなります。 Webmanifestを作成 Webアプリマニフェストというらしく、ざっくり言うと「192×192px」はホーム画面用、「512×512px」はPWA読み込みのスプラッシュ画面用で、それらを定義するJSONファイルとのことです。 これをLiquidファイルにして、テーマ設定で登録した画像が反映されるようにします。 「新しいアセットを追加する」より「manifest.webmanifest.liquid」を新規作成して、以下のソースをコピペし保存します。 { "icons": [ { "src": "{{ settings.webmanifest_icon | image_url: width: 192, height: 192, crop: 'center' }}", "type": "image/png", "sizes": "192x192" }, { "src": "{{ settings.webmanifest_splash | image_url: width: 512, height: 512, crop: 'center' }}", "type": "image/png", "sizes": "512x512" } ] } テーマ設定を追記 設定（Config）の「settings_schema.json」を開き、ファビコンの設定部分を探します。 { "name": "t:settings_schema.favicon.name", "settings": [ { "type": "image_picker", "id": "favicon", "label": "t:settings_schema.favicon.settings.favicon.label", "info": "t:settings_schema.favicon.settings.favicon.info" } ] }, この設定部分を以下の様に差し替えます。 { "name": "t:settings_schema.favicon.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" } ] }, デフォルトの32×32pxアイコンの設定を削除し、Apple touth iconなどをアップロードできるようにしました。 maskableアイコンや他のサイズ、テーマカラーの設定等が必要な場合は用途に合わせて追記してください。 favicon.liquidを作成 「新しいスニペットを追加する」より、「favicon.liquid」を作成し以下のソースをコピペし保存してください。 {%- if settings.apple_touch_icon -%} {%- endif -%} {%- if settings.webmanifest_icon and settings.webmanifest_splash -%} {%- endif -%} テーマファイルにセット レイアウトの「theme.liquid」を開き、 内にあるファビコン出力のLiquidコードを探します。 {%- if settings.favicon != blank -%} {%- endif -%} このコードを以下に差し替えます。 {%- render 'favicon' -%} 「favicon.liquid」のソースを直接追記しても構いませんが、ソースをスッキリさせる為にこの方法で実装しています。 画像をアップロード 最後にカスタマイザーのテーマ設定より以下の3ファイルをアップロードします。 apple-touch-icon.png icon-192.png icon-512.png 保存したらファビコンの実装は完了です。

カートにアイテムが追加されました

FaviconをSVG出力するカスタマイズ

ShopifyのFavicon設定をカスタマイズして、今どきのサイトっぽく出力

2024年4月

2024年5月