基本的なfavicon設定
PR
最低限の構成
結論からになりますが、次の構成を元に必要に応じて追加したりするのがよいかと思います。
構成を一つづつ見ていきます。
<link rel="icon" href="http://example.com/favicon.ico"> <link rel="icon" href="～～/favicon-192x192.png"> <link rel="apple-touch-icon" href="～～/favicon-180x180.png">
favicon.ico 32*32px
<link rel="icon" href="http://example.com/favicon.ico">
サイズは32*32pxのみで主なデスクトップブラウザに対応します。表示が乱れる場合は16*16pxで綺麗に表示可能なものを追加するとよいかもしれません。
他に用意したfaviconに対応していない場合、ルートディレクトリに置かれたこのファイルが最終的に参照されます。
favicon.png 192*192px
<link rel="icon" href="～～/favicon-192x192.png">
主にandroid chrome等に対応します。
apple-touch-icon 180×180
<link rel="apple-touch-icon" href="～～/favicon-180x180.png">
apple製品のアイコンに対応します。
ホーム画面に設置したショートカット等で利用されます。rel属性の値がapple-touch-iconになるので注意してください。
必要に応じて用意するもの
SVG形式
<link rel="icon" type="image/svg+xml" href="～～/favicon.svg">
type属性にimage/svg+xmlを指定します。SVGファイルはベクター形式のため、表示サイズに関わらず画質が劣化しません。
対応するブラウザは充実しつつあるものの、一部非対応のものもあるようなので代替策と組み合わせて使うのが良さそうです。
※ 私が確認したものでは iOS chrome 92 で表示できませんでした。（2021/08/10現在）
ダークモード対応
<svg version="1.1" id="icon" ～～>
<style type="text/css">
.st0{fill:#FFFFFF;} // 通常カラー
@media (prefers-color-scheme: dark) {
.st0{fill:#000000;} // ダークモード時のカラー
}
</style>
SVGファイルのfaviconでは色情報もCSSでファイル内に書き込まれています。
メディアクエリを使ってダークモード時の色を指定することでブラウザの設定に応じた色で表示できます。
msapplication-TileImage
<meta name="msapplication-TileImage" content="～～/favicon-270x270.png">
windowsのピン留めで使われます。
前述の通常のfaviconで代用可能なため、特に理由が無ければ用意しなくてもよさそうです。
不要なもの
“shortcut”
rel属性の"shortcut"は現在では無視されるため不要です。rel="icon"のみでOKです。
safari 用 mask-icon
safariでページをピン留めする際にrel="mask-icon"が必要とされていましたが、safari12以降では通常のfaviconで賄えるようになりました。そのためsafari12以前のバージョンに対応する必要がある場合以外はmask-iconは不要です。
WordPressでのfavicon設定
管理画面で設定する
WordPressでは管理メニューの「外観 > カスタマイズ > サイト基本情報 > サイトアイコン」でfaviconを設定でき、自動的に下記の4項目が出力されます。
使用する画像ファイルは512*512px以上のものが推奨されており、アップロード時にリサイズされたものが生成されます。
<link rel="icon" href="～～/cropped-favicon-32x32.png" sizes="32x32" /> <link rel="icon" href="～～/cropped-favicon-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="～～/cropped-favicon-180x180.png" /> <meta name="msapplication-TileImage" content="～～/cropped-favicon-270x270.png" />
この場合、メディアライブラリにアップロード可能な画像ファイルが対象となるため、SVG形式のfaviconは設定できません。
WordPressでSVG形式のfaviconを使う
冒頭の最低限の書き方をWordPress用に修正し、SVGの1行を付け加えています。
この方法を使う場合は管理メニューからサイトアイコンを設定しないよう注意してください。
<link rel="icon" href="ルートディレクトリ/favicon.ico"> <link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/favicon-192x192.png"> <link rel="apple-touch-icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/favicon-180x180.png"> <link rel="icon" type="image/svg+xml" href="<?php echo esc_url( get_template_directory_uri() ); ?>/images/favicon.svg">
PR
