EC-CUBEでファビコンを設定する方法｜バージョン別の手順を解説

EC-CUBEサイトにファビコンを設定する

EC-CUBEは国産のオープンソースECプラットフォームとして、多くのネットショップで利用されています。WordPressやShopifyと違い、管理画面にファビコン設定の専用メニューがないため、テンプレートファイルを直接編集する必要があります。

手順さえ分かれば難しくありません。この記事ではEC-CUBE 4系と3系、それぞれの設定方法を解説します。

事前準備：ファビコンファイルを用意する

EC-CUBEの場合、ICO形式のファビコンを用意するのが確実です。

ファイル	サイズ	用途
favicon.ico	16+32+48（マルチサイズ）	ブラウザタブ・ブックマーク
favicon-32x32.png	32×32	高解像度タブ
apple-touch-icon.png	180×180	iOSホーム画面

画像→ファビコン変換ツールで画像をICOに変換するか、一括生成ツールで全ファイルをまとめてZIPダウンロードしてください。

アプリアイコン一括生成全プラットフォーム対応のアイコンをZIPで一括ダウンロード

EC-CUBE 4系での設定方法

EC-CUBE 4系（4.0〜4.3）では、Twigテンプレートを編集して設定します。

ステップ1：ファビコンファイルをアップロード

FTPまたはファイルマネージャーで、以下のディレクトリにファビコンファイルを配置します。

[EC-CUBEルート]/html/
├── favicon.ico
├── favicon-32x32.png
└── apple-touch-icon.png

html/ディレクトリはEC-CUBEの公開ルートです。

ステップ2：テンプレートにlinkタグを追加

app/template/default/default_frame.twig を編集します。<head>タグ内に以下を追加してください。

{# ファビコン設定 #}
<link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">

ステップ3：キャッシュクリア

管理画面の 「コンテンツ管理」→「キャッシュ管理」 からキャッシュをクリアします。コマンドラインが使える場合は以下でもOKです。

bin/console cache:clear --env=prod

管理画面からの設定（プラグイン利用）

EC-CUBE 4系ではプラグイン「SEO管理プラグイン」などを導入すると、管理画面からファビコンを設定できる場合があります。テンプレート編集に抵抗がある場合はプラグインの利用も検討してみてください。

EC-CUBE 3系での設定方法

EC-CUBE 3系（3.0〜3.0.18）も基本的な流れは同じです。

ファイル配置

[EC-CUBEルート]/html/
├── favicon.ico
├── favicon-32x32.png
└── apple-touch-icon.png

テンプレート編集

src/Eccube/Resource/template/default/default_frame.twig の <head> 内に追加。

<link rel="icon" href="{{ app.config.root_urlpath }}/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="{{ app.config.root_urlpath }}/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="{{ app.config.root_urlpath }}/apple-touch-icon.png">

EC-CUBE 3系ではasset()関数の代わりにapp.config.root_urlpathでパスを指定します。

カスタマイズテーマを使用している場合

EC-CUBEでカスタムテーマを適用している場合、default_frame.twigの場所がテーマのディレクトリに変わっています。

app/template/[テーマ名]/default_frame.twig

テーマ側のdefault_frame.twigを編集してください。デフォルトテンプレートを編集しても、カスタムテーマが優先されるため反映されません。

反映されない場合の対処法

1. キャッシュクリア

EC-CUBEのTwigキャッシュが残っていると変更が反映されません。管理画面のキャッシュクリアまたはコマンドラインでcache:clearを実行してください。

2. ブラウザキャッシュ

スーパーリロード（Ctrl+Shift+R）またはシークレットモードで確認。

3. パスの確認

ブラウザのデベロッパーツール（F12）→ Networkタブでfaviconと検索し、404エラーが出ていないか確認してください。出ている場合はファイルの配置場所またはTwigテンプレート内のパスが間違っています。

4. .htaccessの確認

EC-CUBEの.htaccessでリライトルールが設定されている場合、静的ファイルへのアクセスがブロックされることがあります。favicon.icoへのアクセスが許可されているか確認してください。

よくある質問

Q. 管理画面だけでファビコンを設定できない？

EC-CUBEの標準機能には管理画面からのファビコン設定がありません。テンプレートファイルの編集が必要です。プラグインを使えば管理画面から設定できる場合もあります。

Q. EC-CUBE 2系でも設定できる？

EC-CUBE 2系の場合は、data/Smarty/templates/[テーマ名]/site_frame.tplの<head>内にlinkタグを追加します。TwigではなくSmarty記法になるので注意してください。

Q. マルチサイズICOは必要？

推奨します。16+32+48のマルチサイズICOであれば、ブラウザのタブ・タスクバー・デスクトップショートカットのすべてで最適なサイズが表示されます。変換ツールで簡単に作成できます。

まとめ

バージョン	テンプレートファイル
EC-CUBE 4系	`app/template/default/default_frame.twig`
EC-CUBE 3系	`src/Eccube/Resource/template/default/default_frame.twig`
EC-CUBE 2系	`data/Smarty/templates/[テーマ名]/site_frame.tpl`

ファビコン画像の準備には、画像→ファビコン変換ツールまたは一括生成ツールをご利用ください。HTMLスニペット付きで全ファイルをまとめてダウンロードできます。