Joomla!

当サイトのfavicon(ファビコン)をRealFaviconGeneratorを使用して設置しました。

Summary

• 現在では、ファイルタイプSVGのfavicon(ファビコン)を設置することがデファクトスタンダードの様です。
  • Adobe | svgファイル
• これを完全アシストしてくれるサイトRealFaviconGeneratorを使用して、Joomlaサイトに設置します。
  
• このため、Joomla! Template Cassiopeiaに用意されているfaviconの機能は無効とします。

Reference

1. RealFaviconGenerator
   
   • faviconの元となるアイコン画像を用意すれば、iOS用やAndroid用のアイコン作成まで変換し、head要素に挿入するスクリプトを用意してくれます
2. Zenn | faviconをsvgでスマートに設定する
   • ファイルタイプSVGのfavicon設置について詳細にご説明されています
3. Zenn | 鬼簡単なfaviconの作成・設定方法
   • RealFaviconGeneratorとマニフェストについて説明がございます
4. Joomla! Documents > Template > favicons
   • Joomla! Template Cassiopeiaに関するfaviconの情報を得ることができます
5. Google Search Central > Documentation > 検索結果に表示されるファビコンを定義する
   • Google 検索の検索結果にファビコンを表示するためのガイドラインを確認できます

Default setting for the Cassiopeia template

• 参照Dのページによれば、Joomla!のCassiopeiaテンプレートの場合、次のディレクトリのfaviconファイルの有無で表示されるfaviconが決まります
  1. media/templates/site/cassiopeia/images
     • ディレクトリAにユーザーが用意したファイルタイプSVGのfaviconを表示します
  2. media/system/images
     • ディレクトリAにfaviconファイルがない場合、ディレクトリBに用意されているデフォルトのファイルタイプSVGのfaviconを表示します

Test

• 当方が作成したfavicon(ファイルタイプ: SVG, ファイル名: joomla-favicon.svg)をftpクライアントにてmedia/templates/site/cassiopeia_child/imagesへアップロードします
  • これだけで、ブラウザタブに作成したfaviconが表示されるようになりました
  • なお、親テンプレートのディレクトリmedia/templates/site/cassiopeia/imagesへアップロードしても表示されます
  • ファイル名をjoomla-favicon.svgからjoomla-favicon-org.svgに別名変更すると再度、デフォルトのfaviconとして表示されるようになりました

Setting by RealFaviconGenerator

• 上記テストのように、faviconファイルを指定ディレクトリにアップロードするだけで、Joomla!が用意している機能にて目的は達成されます
• ただ、当サイトでは、Joomla!が用意している機能は使わず、流行のRealFaviconGeneratorを使ってみることにしました

Benefits of using RealFaviconGenerator

RealFaviconGeneratorを利用すると次の利点を得られます。

• ファイルタイプSVGのfaviconファイルをひとつ用意すれば、かつての設置方法のように16px, 32px, 192px等複数のサイズのファイルを事前準備することなく、自動的に作成してくれます
• head要素に挿入するlink要素も自動作成してくれるので、これを貼り付けるだけです
• マニフェストファイルも自動作成してくれます

Procedure

1. Adobe Illustratorにてfaviconを作成します
   • 当方、デザインスキルはないので、Adobe Stockから好みのデザインを探し、当サイトのイメージに合わせてアレンジしています
2. 作成したAIファイルからSVGファイルをを書き出します
3. RealFaviconGeneratorにSVGファイルをアップロードします
   
4. ブラウザでのタブ表示イメージとGoogle検索結果の表示イメージを確認できます
   
5.  各項目を入力します
   • URL
   • faviconをアップロードするディレクトリ
   • iOSでの表示アイコンの調整
     
   • Androidでの表示アイコンの調整
     
6. 作成されたファイルをダウンロード(A)し、htmlのスクリプト(C)をコピーします
   
7. ダウンロードファイルを解凍して、サーバーの上記手順で指定したディレクトリ(B)にアップロードします
   
   • apple-touch-icon.png
   • favicon.ico
   • favicon.svg
   • favicon-96x96.png
   • manifest.json
     
     • マニフェストファイル名はsite.webmanifestでしたが、参照Cのご案内に倣って、manifest.jsonにリネームしています
   • web-app-manifest-192x192.png
   • web-app-manifest-512x512.png
8. RealFaviconGeneratorが提示したlink要素のスクリプト(B)をCassiopeia_childテンプレートのindex.phpのhead要素内に貼り付けます
   
9. デフォルトでCassiopeia_childテンプレートのindex.phpに記述されているfaviconに関するphpコードをコメントアウトして無効とします
   
   
   • 実は、この作業を実施する前は、RealFaviconGeneratorのチェッカーにて「favicon.svgが2つ存在する」との警告が表示されてしまいました
10. RealFaviconGeneratorのチェッカーを実施し問題ないことを確認します
    
11. PCやスマホでブラウザやショートカット等の表示に問題ないことを確認します