WordPressのファビコンにSVG画像を使う方法

WordPressのファビコンにSVG画像をつかうには、カスタマイザーから現在設定ができないので、head部分にコードを挿入します。

SVGの扱いについては、以下のサイト様を参考にさせていただき、

以下はフックを使ってSVG画像を追加するコードの例です。

function add_svg_favicon() {
    echo '<link rel="icon" type="image/svg+xml" href="' . get_template_directory_uri() . '/assets/images/favicon.svg">';
    echo '<link rel="alternate icon" type="image/png" href="' . get_template_directory_uri() . '/assets/images/favicon.png">';
}
add_action('wp_head', 'add_svg_favicon');

フックを使うことで、テーマを直接変更することはないので便利です。

説明です。

get_template_directory_uri() は、現在使用しているテーマフォルダのURLを取得します。

rel=”icon” の type=”image/svg+xml” でSVGを指定しています。

互換性のために、PNGのファビコンも用意し、rel=”alternate icon” でバックアップとして指定しています。

以上です。

高速・安心のWebサイト運営なら
Hostingerで決まり!

WordPressも秒速でインストール。高性能・低価格で、個人からビジネスまで幅広く対応します。

公式サイトを見る

Author