Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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

Màj le 31 août 2021

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.

creer favicon svg pour le mode sombre du site

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.


Vous aimerez également...

  • 15 codes pour optimiser votre fichier .htaccess
  • Ajouter un beau formulaire d’inscription FeedBurner à votre blog
  • Ajouter une barre flottante de partage à votre blog sans plugin
  • Comment empêcher le bombardement de clics Google AdSense et le trafic invalide en 2022
  • Afficher le titre des articles précédents et suivants au survol de la souris
  • Sécuriser votre site en modifiant les clés de sécurité secrètes SALT dans Wordpress
Accueil / Tutoriels / Créer et changer la couleur du favicon svg pour le mode sombre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?
  • Comment créer des boutons de partage social flottants dans GeneratePress sans plugin ?
  • Google Analytics 4 vs Universal Analytics : Comparaison complète 2023
  • Est ce que Google accepte le contenu généré par l’IA et ChatGPT ?