WordPressでマルチサイズのfaviconファビコンを設定できるようにする

WordPressでマルチサイズのfaviconファビコンを設定できるようにする 制作ブログ

wordpressではカスタマイズのサイトアイコン512×512に画像を設定すれば自動でマルチアイコン対応してくれていますが、サイズ別に表示を変えたいという時にはどうすればいいのでしょうか?

スマートフォンやタブレットなど、アイコンを大きいサイズで表示される時は文字が入っていても読めますが、
ieやブラウザなどのタブ表示に使われる32×32などの小さい表示の時に全て同じ画像からでは都合がわるかったり、
ドット修正した綺麗なものを表示したい場合があります。

WordPressのサイトアイコン・ファビコンの仕組み

WordPressはメディアにアップロードすると、サムネイル画像などの別サイズの画像を自動生成します。
同じようにサイトアイコンとして選択した時にcroppedファイルが作られ、縮小サイズを生成しています。

例えば[ favicon.png ]としてアップロードした場合、
cropped-favicon-32×32.png(32×32用のiconとして設定主にPCブラウザ)
cropped-favicon-192×192.png(192×192用のiconとして設定主にAndroid)
cropped-favicon-180×180.png(apple-touch-icon主にIOS)
cropped-favicon-270×270.png
これらがfavicon用に生成されています。
他のサイズも生成されていますがヘッダ等で利用しているのはこの4つです。

ブラウザのタブ等は16×16ですがその場合32×32が利用されているようです

FTP等で直接書き換える

サイトアイコンとして設定し、生成された後に変更したいサイズを[ wp-content/uploads ]に上書きアップロードする事で変更できます。
頻繁に変更する訳では無いので、これが一番カンタンな方法です。

基本的には大きいサイズは普通に512×512でカスタマイズのサイトアイコンで登録して生成させ、
32×32等小さいもののみ変更したい場合が多いと思いますので、
[wp-content/uploads/cropped-favicon-32×32.png] のみ書き換えるなどで対応できます。

注意点

WordPressは画像をアップロードすると自動でサムネイルが生成されるので、
基本的に元ファイルと同じもののリサイズ・リサンプルが行われたものといった使い方が普通ですが、
生成後の書き換え処理となりますので、以下のような注意点があります。

・ファイル名が同じなので、ブラウザやPCのキャッシュ、キャッシュプラグイン等のキャッシュをクリアする必要があります。
・[ Convert For Madia ] 等のWebP変換プラグインを利用の場合、メディアライブラリや投稿を通していないFTPアップロードではWebP画像が更新されない等がありますので、一括変換しなおすなどの対応が必要です。
・[ regenerate thumbnails ] 等のプラグインでサムネイルを生成しなおすとFTPで書き換えたものが元の512×512でアップロードされたものに上書き生成されてしまう場合がある。