Edited at
EC-CUBEDay 11

EC-CUBEのfavicon(サイトのアイコン)を変更しよう

EC-CUBE Advent Calendar 2018 の記事です。

ものすごい小ネタで恐縮なのですが、EC-CUBEで作成したサイトのfaviconを変更する方法を投稿したいと思います。


faviconとは?

image.png

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を置き換えるだけで作業は完了です。

ブラウザにキャッシュが残っているとすぐに反映されないため、ブラウザのキャッシュを削除してから動作確認してください。

image.png



image.png

地球キャラクターのアイコンに変更してみました;)

明日は@okazyさんですー!