Créer et changer la couleur du favicon svg pour le mode sombre

Lorsque vous téléchargez une image de favicon dans le personnalisateur WordPress, il fournit un aperçu utile pour voir comment votre favicon apparaîtra dans les navigateurs en mode clair ou sombre de votre site. Lorsque la couleur du favicon ne fonctionne pas bien avec le mode sombre, une solution courante consiste à remplacer le PNG transparent par un JPG qui a un fond blanc, mais vous vous retrouvez ensuite avec un carré blanc en mode sombre.

Vous pouvez également utiliser un SVG pour le favicon et modifier le style du favicon en fonction du jeu de couleurs.

Créer un favicon SVG pour le mode sombre de votre site

Créez un SVG carré avec l’icône souhaitée. Cela ressemblera à quelque chose comme ceci:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<path fill="#0F145B" d="......" />
</svg>

Supprimez tout style des formes dans le SVG (donc les attributs et ajoutez ces styles avec CSS en ligne.fillstroke

Vous pouvez utiliser pour styliser la version en mode sombre différemment. Voici à quoi ressemble maintenant mon SVG :

@media ( prefers-color-scheme: dark )

Ajouter un favicon SVG à votre thème

J’ai ajouté mon .svg favicon au répertoire de mon thème, mais vous pouvez l’ajouter n’importe où dans votre thème. /assets/images/

Ajoutez le code suivant dans le fichier fonctions de votre thème pour inclure le favicon SVG.

/**
 * SVG Favicon
 */
function be_svg_favicon() {
	echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );

Il semble que le favicon SVG soit prioritaire sur celui généré par WP, qu’il apparaisse avant ou après dans le balisage de la page, mais j’ai la priorité définie sur 100 pour qu’il apparaisse après, juste au cas où.

Même avec cette approche, vous devez télécharger une version JPG du favicon dans le personnalisateur WordPress. Il existe encore de nombreux navigateurs qui ne prennent pas en charge les favicons SVG, vous aurez donc besoin d’une repli.