LoginSignup
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-12-10

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さんですー!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2