home / blog / wordpressでfaviconをSVG画像にする

wordpressでfaviconをSVG画像にする

wordpressでブラウザのタブに表示されるサイトアイコンをsvg画像に変更した時のメモ

svgアップロードできなかったり、svgでアップロードしても切り抜きエラーで設定できなかったりと、めんどくさかった。

テーマはcocoonを使っていますが、他のテーマでも同様の手順で可能だと思います。

SVG画像をアップロード

wordpressはsvgのアップロードに対応していないのでプラグインを使う。

safe SVGをインストールして有効化

Safe SVG

有効化すると、SVG画像をアップロードできるようになります。

アップロードした画像のURLをコピーしておく。

テーマのfunction.phpでfaviconを指定

ダッシュボード -> 外観 -> テーマファイルエディター を選択

function.phpに以下を記述

function my_site_icon_url( $url ) {
	return 'https://example.com/wp-content/uploads/2022/01/favicon.svg';
}
add_filter ( 'get_site_icon_url', 'my_site_icon_url' );

赤字の部分に先ほどコピーしたSVG画像のURLを指定します。

以上。