Joomla カスタマイズ
Joomla 6 で favicon を変更する方法と注意点
Joomla 6 の標準サイトテンプレート「Cassiopeia」で favicon を変更したいとき、今までのやり方でfavicon.icoを差し替えても全然反映されないとお悩みの方。どのファイルを差し替えればよいのか？コアアップデートで元に戻ってしまわないようにするには？この記事では、その仕組みと安全な変更方法を解説します。
📑 目次
Joomla 6（Cassiopeia）が読み込んでいる favicon
Cassiopeia のテンプレートファイル templates/cassiopeia/index.php では、favicon を次のように登録しています。
// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
実際に参照されているファイルは、以下の 3 つです。
| 種別 | ファイルパス |
|---|---|
| SVG favicon（メイン） | media/system/images/joomla-favicon.svg |
| ICO favicon（フォールバック） | media/system/images/favicon.ico |
| Safari pinned tab 用 | media/system/images/joomla-favicon-pinned.svg |
SVG は「優先される」のか？
上記のコードの通り、最初に joomla-favicon.svg が rel="icon" で登録されています。その後に、古いブラウザなどのために favicon.ico が rel="alternate icon" として追加されています。
現在のブラウザ環境ではほとんどの場合「SVG favicon が優先して使われる」と考えて問題ありません。タブに表示されるアイコンを変えたい場合は、まず media/system/images/joomla-favicon.svg を差し替えるのがもっとも重要になります。
コアファイルを書き換えると何が問題？
もっとも手っ取り早い方法は、コアが参照している以下のファイルをそのまま差し替えることです。
| 差し替え対象ファイル |
|---|
media/system/images/joomla-favicon.svg |
media/system/images/favicon.ico |
media/system/images/joomla-favicon-pinned.svg |
コアアップデートで上書きされるリスク
しかし、これらは Joomla コア配下のファイルです。そのため、Joomla 本体をアップデートしたときに、これらのファイルが「元の公式ファイルで上書きされてしまう可能性が高い」という問題があります。一度きりのテスト環境ならまだしも、本番サイトでこの方法を取るのはあまりおすすめできません。
コアに依存しない「安全な」 favicon の設定方法
コアアップデートで favicon が元に戻ってしまうのを防ぐには、テンプレート側で独自の favicon を登録する方法をとるのが安全です。
1. テンプレート配下に独自 favicon を配置する
例として、Cassiopeia テンプレートに独自アイコンを追加します。
| 配置ファイル |
|---|
templates/cassiopeia/images/my-favicon.svg |
（必要なら）templates/cassiopeia/images/my-favicon.ico |
2. テンプレートの index.php に favicon を登録する
つづいて、templates/cassiopeia/index.php に、独自 favicon を登録するコードを追加します。既存の joomla-favicon... を使わず、完全に自前にしたい場合の例を示します。
use Joomla\CMS\Uri\Uri;
// ...（中略）...
// Custom favicon (template-local, safe from core updates)
$customFaviconSvg = Uri::root() . 'templates/cassiopeia/images/my-favicon.svg';
$customFaviconIco = Uri::root() . 'templates/cassiopeia/images/my-favicon.ico';
// 既存の Joomla コア favicon 行を使わない場合はコメントアウト or 削除
// $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
// $this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
// $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
// 独自 favicon を読み込む
$this->addHeadLink($customFaviconSvg, 'icon', 'rel', ['type' => 'image/svg+xml']);
if (is_file(JPATH_ROOT . '/templates/cassiopeia/images/my-favicon.ico')) {
$this->addHeadLink($customFaviconIco, 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
}
これにより、次のようなメリットがあります。
テンプレート配置のメリット
- 画像ファイルは
templates/cassiopeia/images/以下にあるため、Joomla コアのアップデートで上書きされない - テンプレート単位で favicon を切り替えられる
- 子テンプレートを使っている場合も、同じ考え方で安全にカスタマイズ可能
散々favicon.icoが反映されず沼にハマっていたのですが、この設定を書き込んだらすんなり反映されてプチストレスが解消されました🎉
まとめ
📝 まとめ
Cassiopeia では SVG favicon（joomla-favicon.svg）がメインとして優先的に使われる。コア配下の media/system/images/... を直接差し替えると、コアアップデートで元に戻るリスクが高い。安全に運用したい場合は、テンプレート配下に独自 favicon を置き、テンプレートの index.php で明示的に登録するのがおすすめ。Joomla サイトを長期運用する場合は、コアファイルを直接編集せず、テンプレートや子テンプレート側でカスタマイズするのが基本です。favicon もその一つとして、ここで紹介した方法での実装を検討してみてください。