【WordPress】ファビコンが出ない？favicon.icoの他にsvgもある？favicon作成と記述を再確認して設定してみる

WordPress サイト制作2024.10.20

久々にWordPressサイトのファビコン（favicon.ico）を設定したけど、アレ？上手く出ない？
えっ！？「favicon.ico」だけじゃあダメなんかいー！なんでだー！
という事があったので、覚書として書いておきます。

以前ファビコンといえば、「favicon.ico」を直下において、header内のタグで指定すればよい。
という認識でいたけど、最近はsvgだったり、pngだったり。いろんなデータ形式もある。

その他に、別件でGoogle検索時のサイト表示にfaviconがでない。
という事もあったりで、一体どうすればいのか…と少しモヤモヤ。

もくじ

ファビコンのデータの種類とサイズ
header内の記載方法
WordPressのファビコン事情
WordPressのデフォルトfaviconを消して、headerに新たに追加する
ファビコンとは違う追記メモ

色々検索した結果、より簡単で、確実にファビコンを設定するには以下のようにするのがよいみたい。

ファビコンのデータの種類とサイズ

概ねのブラウザ用・・・「.svg」
iOS（iPhoneなどのホーム画面）用・・・「.png」180x180px
Googleの検索結果・・・「.svg」（svg以外なら48pxの倍数のpngアイコン↑と併用できます）
SVGが使えない（Safari）ブラウザ・・・「favicon.ico」32x32px

header内の記載方法

<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="/favicon.ico" sizes="32x32"><!-- 32×32 -->

※favicon.icoはサイト直下に置くこと

以下、header内の記載説明
おおむねのブラウザ（Safari以外）では、svgアイコンを参照してくれるとの事。

参考サイト１を見てpngデータを作るが、iPadの時だけ、faviconが出ない。
調べるうちに、apple touch iconの画像の推奨サイズは180px × 180px（正方形）
ということがわかり、180に変更した。

link rel="icon"のfavicon.ico部分は、Chromeはバグ対応。
大抵は、favicon.ico部を、直下におけば参照してくれるが
ChromeはバグがありSVGを参照しないようなので、32×32の記載が必要との事。

本当は、これ以外にAndroidなどに最適なファビコンの記載もあるようだけど、
私はメイン環境がappleなのと、他環境でも見たところ問題なかったので、この3行で対応しようと思う。

記載方法やデータ形式について、もっと詳しく知りたい人は、以下のサイトを見てください。
詳しいサイズの説明や、ダークモードへのファビコン対応なども載っているので、とても参考になりますよ。

参考サイト１
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
参考サイト２
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要 | コリス

あと、icoファイルは以下のサイトでつくれます。
Favicon ジェネレーター

WordPressのファビコン事情

WordPressのテーマによっては、カスタムテーマでアイコン設定できる機能がある。
私がカスタムロゴを設定出来るようした際、アイコンも作るようにしてみた。

WordPressでアイコンを設定した場合以下のコードが書き出される

<link rel="icon" href="http://www.site.com/wp-content/uploads/2024/10/cropped-top-image-1920-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="http://www.site.com/wp-content/uploads/2024/10/cropped-top-image-1920-180x180.png" />
<meta name="msapplication-TileImage" content="http://www.site.com/wp-content/uploads/2024/10/cropped-top-image-1920-270x270.png" />

- link rel="icon"・・・通常のサイト横に出るアイコン指定
- link rel="apple-touch-icon"・・・iOSの設定画面用
- meta name="msapplication-TileImage"・・・Windowsタイル用画像設定

※WindowsタイルはWindowsPCのメニュー画面上にWEBサイトをピンどめした時に表示されるとの事。今はこのアイコン設定が使われなくなったみたいですが…。

プラグインや設定を変えていない場合、WordPressで設定できるのはpngとjpgのみ。（.icoや.svgはアップできない。）

私の場合FTPでファイルをアップ出来るので、faviconはFTPでアップし、
WordPress側でheaderに自動で書き出されているfaviconの記述を消すことにした。

WordPressのデフォルトfaviconを消して、headerに新たに追加する

記述を消すには、function.phpに以下を追加する。

function.php

remove_action('wp_head', 'wp_site_icon',99); #ファビコンオフ

参考サイト
[WordPress]サイトアイコンを設定した際に自動で追加されるiconヘッダを無効にする | なうびるどいんぐ

そして、以下の記述を、header.phpに追加する。
header.php

<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="/favicon.ico" sizes="32x32"><!-- 32×32 -->

※favicon.icoはサイト直下に置くこと

追記：
ここまでしたけど、何故かiPadのSafari、しかも、トップページのみfaviconがwordpressのアイコンになっていた。
iPhoneのSafari、iPadのChrome、MacのSafari、MacのChrome、MacのFirefoxではちゃんと表示されている。

iOSでは、サイトドメイン指定で、キャッシュと履歴のクリアをしたけど、変わらない。
調べたところ、faviconは別の場所にキャッシュされているようで…。
なので、このまましばらく、キャッシュが自然に新しくなるまで様子を見てみようと思う。

（なんか、スッキリしないなぁー、と思いつつ。）