EC-CUBE Advent Calendar 2018 の記事です。
ものすごい小ネタで恐縮なのですが、EC-CUBEで作成したサイトのfaviconを変更する方法を投稿したいと思います。
faviconとは？
favicon（ファビコン）とは、ウェブページに表示されるシンボルマークのアイコンです。EC-CUBEを利用してサイトを作成した場合、デフォルトだとEC-CUBEロゴのfaviconが設定されています。
せっかくEC-CUBEを利用してオリジナルなショップを作成したのにfaviconがEC-CUBEのまま...なんてことにならないように、faviconの変更方法を共有します。
faviconの作成
「favicon 作成」で検索するといくつかのサイトが見つかると思います。
今回は以下のサイトを利用して作成しました。画像ファイルを作成してアップロードするだけで簡単にfaviconを作成する事ができます。
ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/
※画像サイズは48x48ピクセルを推奨
favicon.icoファイルの置き換え
EC-CUBEに含まれるfavicon.icoファイルを置き換えることで、サイトに表示されるfaviconを変更できます。必ず favicon.ico というファイル名のまま置き換えて下さい。
各バージョンごとにfavicon.icoのパスが異なるためまとめておきます。
| EC-CUBE | favicon.icoのパス |
|---|---|
| 4系 | ./html/template/default/assets/img/common/favicon.ico |
| 3系 | ./html/template/default/img/common/favicon.ico |
| 2.13系 | ./html/user_data/packages/default/img/common/favicon.ico ./html/user_data/packages/sphone/img/common/favicon.ico ※スマホ ./html/user_data/packages/admin/img/common/favicon.ico ※管理画面 |
動作確認
上記パスにあるfavicon.icoを置き換えるだけで作業は完了です。
ブラウザにキャッシュが残っているとすぐに反映されないため、ブラウザのキャッシュを削除してから動作確認してください。
↓
地球キャラクターのアイコンに変更してみました;)
明日は@okazyさんですー！