Source de l'icône
Onglet du navigateur
Chrome, Edge et Firefox affichent la version sombre du fichier favicon.svg quand l'appareil est en mode sombre.
Version simplifiée pour les petites tailles
Un logo détaillé devient illisible en 16 px. Déposez ici une version réduite au symbole : elle sera utilisée pour le fichier .ico (16, 32 et 48 px) uniquement.
iPhone et iPad
iOS n'accepte pas la transparence (elle deviendrait noire) et arrondit lui-même les angles : l'icône est donc carrée et pleine.
Android et application web
L'icône adaptative (« maskable ») peut être découpée en cercle ou en goutte par Android : son contenu doit rester dans le cercle central, soit une marge d'au moins 20 %.
Couleurs et affichage de l'application
Installation
« / » correspond à la racine du site : c'est l'emplacement recommandé, car beaucoup d'outils cherchent directement /favicon.ico.
La version ajoute « ?v=2 » aux adresses pour forcer les navigateurs à afficher la nouvelle icône après un changement.
Aperçu
Contenu du pack
Code à placer dans le <head>
Installer sur WordPress
- Retirez l'icône du site gérée par WordPress (Apparence, Personnaliser, Identité du site), sinon ses balises s'ajouteront aux vôtres.
- Décompressez le pack et envoyez les fichiers dans le dossier indiqué (la racine du site, à côté de wp-config.php) avec le gestionnaire de fichiers de votre hébergeur ou un logiciel FTP.
- Avec Elementor Pro, ouvrez Elementor, puis Code personnalisé : créez un code, choisissez l'emplacement « <head> », collez le code ci-dessus et publiez. Sans Elementor Pro, une extension comme WPCode fait la même chose.
- Videz le cache de votre extension de cache et de votre navigateur, puis ouvrez votre-site.fr/favicon.ico pour vérifier.
Contenu du fichier site.webmanifest
Comment créer votre favicon
- Ajoutez votre logo, idéalement en SVG, ou créez une icône à partir d'une lettre ou d'un emoji.
- Réglez chaque support : l'onglet du navigateur, l'iPhone et Android n'ont pas les mêmes contraintes. L'aperçu se met à jour en direct.
- Vérifiez le rendu en 16 px, pixel par pixel : si le logo devient illisible, ajoutez une version simplifiée réservée aux petites tailles.
- Téléchargez le pack, envoyez les fichiers à la racine de votre site et collez le code fourni dans le <head>.
L'outil rogne automatiquement les marges vides de votre image, peut rendre transparent un fond blanc et vous alerte si votre icône risque de disparaître sur un onglet sombre. Un logo vectoriel donne les meilleurs résultats : découvrez pourquoi dans notre article sur les images vectorielles.
Les fichiers d'un favicon complet en 2026
- favicon.ico (16, 32 et 48 px) : le format historique, toujours demandé automatiquement par les navigateurs et de nombreux outils.
- favicon.svg : une icône vectorielle, nette à toutes les tailles, capable de changer d'apparence en mode sombre dans Chrome, Edge et Firefox.
- favicon-96x96.png : la version utilisée notamment par Google, qui exige une icône carrée multiple de 48 px.
- apple-touch-icon.png (180 px) : l'icône affichée quand un visiteur ajoute votre site à l'écran d'accueil de son iPhone.
- Icônes Android et site.webmanifest : les versions 192 et 512 px, dont une adaptative que le téléphone peut découper en cercle ou en goutte.
Gratuit
L'icône du site WordPress
Simple à régler, elle génère quelques tailles en PNG. Mais ni favicon.ico à la racine, ni SVG, ni mode sombre, ni réglage par support.
Recommandé
Le pack complet
Chaque support reçoit une icône adaptée : fond plein pour l'iPhone, marges de sécurité pour Android, version sombre pour les onglets.
Votre favicon dans les résultats de Google
Google affiche le favicon à côté du nom de votre site dans ses résultats, sur mobile comme sur ordinateur. Pour qu'il apparaisse, l'icône doit être carrée, d'au moins 48 px (multiple de 48), et la page d'accueil doit être accessible à Googlebot. Visualisez le rendu de votre page avec notre simulateur SERP.
Les erreurs à éviter
- Un logo horizontal complet réduit à 16 px : gardez seulement le symbole ou l'initiale.
- Un logo noir sur fond transparent : il disparaît sur les onglets en mode sombre. Activez l'adaptation au mode sombre ou ajoutez un fond.
- Des couleurs trop proches entre l'icône et son fond : vérifiez-les avec notre vérificateur de contraste.
- Deux séries de balises dans le code : retirez l'icône du site WordPress si vous installez le pack complet.
Questions fréquentes
Pourquoi mon nouveau favicon ne s'affiche-t-il pas ?
Les navigateurs gardent les favicons en cache très longtemps. Videz le cache de votre site et de votre navigateur, ou indiquez une version (par exemple 2) dans l'outil : le code ajoute alors « ?v=2 » aux adresses pour forcer la mise à jour.
Combien de temps pour voir mon favicon dans Google ?
Google doit d'abord explorer à nouveau votre page d'accueil : comptez de quelques jours à quelques semaines. Inutile de modifier le code entre-temps.
Faut-il encore un fichier favicon.ico ?
Oui. Les navigateurs le cherchent automatiquement à la racine du site, tout comme les lecteurs de flux, les messageries et certains outils de référencement. Le pack l'inclut avec ses trois tailles.
Safari gère-t-il le favicon SVG ?
Non, Safari utilise les versions PNG et l'icône Apple. C'est pourquoi le pack combine tous les formats : chaque navigateur choisit celui qu'il préfère.
Mon logo est-il envoyé à Alpixi ?
Non. Tout est généré dans votre navigateur, y compris le fichier ZIP. Besoin d'une identité visuelle complète ou d'un nouveau site ? Découvrez notre offre de création de site web.
Un projet en tête ?
Parlons de votre prochain site web
Site vitrine, refonte, identité visuelle ou référencement : Alpixi accompagne les entreprises des Alpes et d'ailleurs, avec un interlocuteur unique du premier échange à la mise en ligne.
★★★★★
Noté 5/5 par nos clients sur Google
Contact direct
Agence basée à Autrans-Méaudre en Vercors
