偶然、iPhone版Firefoxのホーム画面でWordPressで作った特定のサイトのアイコンがぼやけている…ことがわかりました。下図の一番右のアイコン。
これはFaviconからもってきて表示しているはずなので、HTMLを見てみると、
<link rel="icon" href=".../cropped-siteicon-32x32.png" sizes="32x32"> <link rel="icon" href=".../cropped-siteicon-192x192.png" sizes="192x192"> <link rel="apple-touch-icon" href=".../cropped-siteicon-180x180.png"> <meta name="msapplication-TileImage" content=".../cropped-siteicon-270x270.png">
WordPressがサイトアイコン(512px以上の正方形推奨)から自動的に生成しているタグがありましたが特に問題ないように見えます。しかし512px以上の正方形推奨と言っておきながら、最大270pxのものしか使ってないじゃん。。。
iPhone版Firefoxのホーム画面のアイコンは、恐らく rel=”icon” から拾ってきてくれるはずなのですが、どうもそのうち32pxの正方形から拾ってるくさい… (ちゃんと試してませんが)
英語の掲示板を見ると、どうもiPhone版Firefoxでは(？)、256pxの rel=”icon” 指定があるとそれを拾ってくれるらしいので、下記のコードをfunctions.phpに追加してみました。
function my_site_icon_meta_tags_fix($meta_tags) {
if ( ! has_site_icon() && ! is_customize_preview() ) {
return;
}
$icon_256 = get_site_icon_url( 256 );
if ( $icon_256 ) {
$meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="256x256" />', esc_url( $icon_256 ) );
}
$icon_512 = get_site_icon_url( 512 );
if ( $icon_512 ) {
$meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="512x512" />', esc_url( $icon_512 ) );
}
return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'my_site_icon_meta_tags_fix', 10 , 1 );
結果、下記のように256pxサイズを超える最も近い画像が256pxとして出力されました。他にも、高解像度のFaviconを求めてるアプリがあるかもしれないので、せっかく512pxの正方形でサイトアイコン指定してるので、512pxのフル画像のものも出力しときました。
<link rel="icon" href=".../cropped-siteicon-32x32.png" sizes="32x32"> <link rel="icon" href=".../cropped-siteicon-192x192.png" sizes="192x192"> <link rel="apple-touch-icon" href=".../cropped-siteicon-180x180.png"> <meta name="msapplication-TileImage" content=".../cropped-siteicon-270x270.png"> <link rel="icon" href=".../cropped-siteicon-270x270.png" sizes="256x256" /> <link rel="icon" href=".../cropped-siteicon.png" sizes="512x512" />
これで下記のようにアイコンがくっきり表示されるようになりました。あまりキチッと調べてないのですが、このあたりの仕様がどうもあっちこっちアプリによって違っていてよくわかりずらいような。。。←言い訳ですｗ
