【EC-CUBE 4】ファビコン(ウェブサイトのアイコン)を変更する方法

ファビコンの設定方法

この記事では、Webページのアイコンとして表示されるファビコンを変更する方法を解説しています。

デフォルトの状態

ファビコン変更前
EC-CUBEのアイコンが設定されている

ファビコン変更後

ファビコン変更後
好きなアイコンに変更できる

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver

目次

ファビコンの変更は、管理画面からファイルをアップロードするだけ

ファビコンの変更方法はとても簡単。
EC-CUBE管理画面から「コンテンツ管理」→「ファイル管理」→「assets」→「img」→「common」とフォルダを開いていき、『favicon.ico』と名前を付けた画像データをアップロードするだけです。

ファビコンデータの格納場所_管理画面
「コンテンツ管理」→「ファイル管理」からフォルダを開いていき、『favicon.ico』というファイルが保存されているフォルダまで進む

すでに『favicon.ico』というファイルが格納されていますが、これはEC-CUBEの初期アイコンです。
これを新しい画像データで上書き(同じ名前の画像データをアップロード)すれば、ファビコンも新しい画像に置き換わります。

アップロードの手順
  1. 『ファイル選択』ボタンをクリックし、変更したい画像データを選択
  2. 『アップロード』ボタンをクリック

元々のEC-CUBEアイコンデータは上書きされて消えてしまいます。
もし残したければ、ファイル横の「雲+下矢印マーク」から自身のPCにダウンロードしておくか、本記事後半の【複数の画像ファイルを残したままファビコンを変更する】を参考にしてください。

ファビコンデータ更新後_管理画面
画像データをアップロードした後の画面

ファイルサーバーからアクセスする場合、「html/user_data/assets/img/common」下に画像を保存します。

ファビコンの画像サイズは、アスペクト比(縦横比)が「1:1」なら基本的に何でもOKです。(縦横の長さが違うと、アイコンが歪んで見えるかも)
ちなみに、EC-CUBEのアイコンは「256px × 256px」となっています。
あまり大きすぎると重くなってしまうので、迷っている人は同じサイズにしておきましょう。

なお、ブラウザのキャッシュが残っていると画像を変更しても反映されない場合があります。
無用な対応に追われないよう、アップロード後はキャッシュを削除したり、Googleなら別のアカウントで開いたり、違うブラウザで開いたりするなどの方法で確認するようにしてください。
EC-CUBE管理画面の「キャッシュ管理」ではなく、ブラウザのキャッシュを削除すること!

複数の画像ファイルを残したままファビコンを変更する

ここからは少し応用編で、元々のEC-CUBEアイコンや、何らかの理由で複数のアイコンをそのままフォルダに残しておきたいときの対処法を解説します。

ファビコンに設定しないファイルの名前を変えておく

一番手っ取り早い方法です。
ファビコンにしたくない画像のファイル名を、『favicon.ico』以外にしておくだけ。
(ファビコンにしたい画像のファイル名は『favicon.ico』にしておく。)

EC-CUBEをインストールしたばかりの初期状態では、

  1. すでに保存されている『favicon.ico』を『eccube.ico』などの適当な名前に変更。
  2. 新しく設定したい画像ファイルを『favicon.ico』という名前に変更し、アップロード。

という手順を踏むことで、元々の画像ファイルを上書きすることなく変更できます。

ファビコンの参照リンク先を変更する

そもそも画像ファイル名を『favicon.ico』にする理由は、ファビコンを設定するための参照リンク先が『favicon.ico』になっているため。
つまりそのリンク先を変更すれば、『favicon.ico』以外のファイル名でもファビコンに設定できます。

ファビコンを含む、EC-CUBE全体の土台となるページは「src/Eccube/Resource/template/default」下の『default_frame.twig』というファイルです。
src下のファイルを直接編集するのはオススメしないので、まずはこのファイルを「app/template/default」下にコピーし、コピーしたファイルを編集します。

『default_frame.twig』の格納場所

default_frame.twigの格納場所_FTP
src/Eccube/Resource/template/defaultに保存されている

ファイルをapp下にコピー

default_frame.twigのコピー先_FTP
app/template/defaultにコピーする

コピーしたファイルを開き、38行目くらいにあるファビコンのリンク先を変更します。

もともとのコード(38行目付近)

<link rel="icon" href="{{ asset('assets/img/common/favicon.ico', 'user_data') }}">

rel属性が「icon」となっている、href属性を修正します。

変更後のコード

<link rel="icon" href="{{ asset('assets/img/common/noveblo.ico', 'user_data') }}">

「favicon.ico」部分を好きなファイル名に変更します。ここでは「noveblo.ico」にしました。

コードを更新したら、先程変更したファイル名(noveblo.ico)をもつ画像ファイルをアップロードします。

ファビコンデータを残したまま更新_管理画面
変更したリンク先の名前をもつファビコンデータをアップロード

以上で変更完了です。最後にキャッシュを削除し、ファビコンが変わっているか確認しましょう。
EC-CUBE管理画面の「コンテンツ管理」→「キャッシュ管理」からキャッシュを削除できます。
加えて、ブラウザ側のキャッシュも削除しておきます。

まとめ

以上、ファビコンの変更方法について紹介しました。

最後に紹介した「default_frame.twig」ファイルを修正する方法は、一見すると面倒なだけに思われるかもしれません。が、このファイルを修正できるようにしておくと、ファビコン以外の基本的なページ設定(ページタイトルの表示方法など)もカスタマイズできるようになります。

ファビコンを変えるだけなら最初の方法を覚えておくだけでOKですが、他にも色々とカスタマイズしてみたいと思っている方は、最後の方法も知っておくと後々便利かもしれません。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次