【CMS活用術】ファビコンの設定方法

皆さんこんにちは、ワニミと申します！
兄ワニタと姉ワニエ、そして姉ワニコとともに、皆さんにお役立ち情報をお伝えしていきます！
どうぞよろしくお願いします！

早速ですが、今回は「ファビコン」の設定方法をご紹介いたします！

ファビコンとは、ウェブサイトのブラウザタブやブックマークに表示される小さなアイコンのことです。
オリジナルのアイコンを設定することで、ブランドイメージの向上や、ユーザーがサイトを見つけやすくなる効果があります！

※ファビコンを設定していない場合、ブラウザは初期設定のアイコン（例：地球アイコンなど）を表示します。

本記事でご紹介するHTMLを＜head＞ タグ内に追記することで、簡単にファビコンを設定できます。
＜head＞ タグの編集方法は、マニュアルをご確認ください。

ファビコンを設定する方法

事前準備①：画像のアップロード

ファビコンとして使用する画像を、事前にサーバまたはカートS管理画面にアップロードしておく必要があります。

■ 推奨画像形式：
・PCブラウザ用：ico または png
・スマートフォン / タブレット用（iOS / Android）：png

■ 推奨サイズ：
・PCブラウザ用：16×16、32×32、48×48
・スマートフォン / タブレット用（iOS / Android）：180×180

※カートSの管理画面では png形式 のみアップロード可能です。
　ico形式のファイルをご利用の場合は、サーバーに直接アップロードしてください。

カートS管理画面でのアップロード手順については、以下にご案内いたします。

手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像アップロードをクリック

手順2. 分類は「フリー」を選択し、画像ファイルを選択してアップロード

※ファビコン用の元画像は、表示サイズの2倍程度の大きさで作成しておくと、
　縮小してもきれいに表示されます。 例：16×16 用なら 32×32、180×180 用なら 360×360 など。

事前準備②：画像URLの確認

手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像一覧をクリック

手順2. アップロードした画像の「URL表示」をクリック

手順3. 「画像URL」欄に表示されるURLをコピー

＜head＞タグ設定

事前準備が完了しましたら、使用する形式に合わせて、以下のコードを＜head＞タグ内に設定してください。

■ ICO形式を使用する場合

<!-- https://●●●●●.ico の部分にファビコン画像のURLを指定してください -->
<link rel="icon" href="https://●●●●●.ico" type="image/x-icon">

<!-- https://●●●●●.png の部分にスマホ用ファビコン画像のURLを指定してください -->
<link rel="apple-touch-icon" href="https://●●●●●.png" sizes="180x180">

■ PNG形式を使用する場合

<!-- https://●●●●●.png の部分に16×16用のPNG画像のURLを指定してください -->
<link rel="icon" href="https://●●●●●.png" sizes="16x16" type="image/png">

<!-- https://●●●●●.png の部分に32×32用のPNG画像のURLを指定してください -->
<link rel="icon" href="https://●●●●●.png" sizes="32x32" type="image/png">

<!-- https://●●●●●.png の部分に48×48用のPNG画像のURLを指定してください -->
<link rel="icon" href="https://●●●●●.png" sizes="48x48" type="image/png">

<!-- https://●●●●●.png の部分に180×180用のPNG画像のURLを指定してください -->
<link rel="apple-touch-icon" href="https://●●●●●.png" sizes="180x180">

以上がファビコンの設定方法となります。
サイトを訪れたユーザーに覚えてもらいやすくなり、ブランドイメージの統一にも役立ちます。
ぜひ、ショップさまの雰囲気に合わせたオリジナルのファビコンを設定してみてください♪