サイトのファビコンの設置方法の一例です。
通常は、WordPressですと、テーマのカスタマイズで、サイトのアイコン登録部に、アイコンファイルをアップロードします。しかし、場合によりサイトを訪問している時に、ブラウザのタグに付くアイコンは、登録したアイコンが表示されているのに、お気に入りに登録すると、登録したファビコンが反映しない事があります。この方法では、テーマのカスタマイズでの登録はせず、画像設置部へのリンクをHeader部に記述する事でファビコンの機能が実現出来ましたので記録しました。
サーバーの共用部にファビコン用ファイルを置く
当サイトで、ドキュメントルートに共通のファイルの置き場を設け、例えば、フォルダ名commonとして共通のJSファイルも置くようにして、サイト共通に使えるものは、共用部に設置するようにしました。
共用部のファイル一覧です
# ll
合計 536
-rw-r–r–. 1 apache apache 3170 3月 31 2018 colorbox.css
-rw-r–r–. 1 apache apache 810 6月 19 16:39 favicon.png
drwxr-xr-x. 2 apache apache 198 12月 16 2019 images
-rw-r–r–. 1 apache apache 29170 10月 26 2019 jquery.colorbox.js
-rw-r–r–. 1 apache apache 92633 10月 26 2019 jquery.min.js
上記の状態にした後、サイトのヘッダー部に下記のコードを貼り付けます
<link rel=”shortcut icon” type=”image/icon” href=”https://east19-mikas.com/common/favicon.png”>
<link rel=”apple-touch-icon” href=”https://east19-mikas.com/common/favicon.png”>
<meta name=”msapplication-TileImage” content=”https://east19-mikas.com/common/favicon.png”>
共用部でファビコンを設置した結果
上記の方法では、テーマの共用部にはファビコンは設置せず、ヘッダー部に上記のリンクを設置し、共用部に必要なファイルを収容する事で、初期の目的が達成できました。
即ち、ブラウザで、当サイトを開いている時はブラウザのタグ部に目的のファビコンが表示されると同時に、お気に入りに登録した時も、サイト名の前に、設定されているファビコンが表示されました。
テーマCertifyではICOファイルが必要でした
テーマcertifyでは、ブラウザFirefoxのタブアイコンには、ICOファイルを追記しないと、ファビコンが表示されませんでした・・・下記がその内容です
<link rel=”icon” href=”https://east19-mikas.com/commjs/favicon.ico” />
<link rel=”icon” href=”https://east19-mikas.com/commjs/img/favicon.png” sizes=”32×32″ />
<link rel=”icon” href=”https://east19-mikas.com/commjs/img/favicon.png” sizes=”192×192″ />
<link rel=”apple-touch-icon” href=”https://east19-mikas.com/commjs/img/favicon.png” />