Comment créer un favicon
Pour créer un favicon, ajoutez votre logo ci-dessus (ou saisissez une lettre ou un emoji), réglez l'apparence, puis téléchargez le ZIP. Les aperçus montrent l'icône à chaque taille réelle et dans un onglet de navigateur, en mode clair et en mode sombre.
- Choisissez la source. Un logo PNG ou SVG donne les meilleurs résultats ; toute autre image est ajustée dans un carré. Pas de logo ? Utilisez une lettre ou un emoji sur un fond coloré.
- Réglez l'apparence. Couleur d'arrière-plan ou transparence, forme (carré arrondi, carré ou cercle) et marges autour de l'image.
- Téléchargez. Télécharger toutes les icônes vous donne le pack complet ; favicon.ico uniquement vous donne seulement ce fichier.
Contenu du pack de favicon
| Fichier | Taille | Utilisé par |
|---|---|---|
favicon.ico | 16, 32 et 48 px | Tous les navigateurs, Windows, résultats de recherche |
favicon-16x16.png, favicon-32x32.png | 16 et 32 px | Onglets de navigateur et favoris |
apple-touch-icon.png | 180 px | Écran d'accueil de l'iPhone et de l'iPad |
android-chrome-192x192.png, -512x512.png | 192 et 512 px | Écran d'accueil Android, applications web installées |
site.webmanifest | - | Nomme les icônes et définit les couleurs pour Android et les applications web |
favicon-html.txt | - | Les balises à coller dans vos pages |
L'icône Apple a toujours un arrière-plan uni et des angles droits : les iPhone arrondissent eux-mêmes les angles et affichent les zones transparentes en noir.
Ajouter le favicon à votre site web
- Décompressez le pack et mettez en ligne les fichiers dans le dossier racine de votre site web, à côté de votre page d'accueil, de sorte que
votresite.com/favicon.icoaffiche l'icône. - Collez les balises HTML (affichées ci-dessus et dans
favicon-html.txt) dans le<head>de vos pages. - Rechargez la page en vidant le cache. Les navigateurs gardent les anciens favicons en mémoire : une fenêtre de navigation privée est le moyen de vérification le plus rapide.
Sur WordPress, vous pouvez à la place définir l'icône de 512 px comme icône du site dans le Personnaliseur ; WordPress crée alors lui-même les autres tailles.
Conseils pour un favicon lisible
- Simplifiez. À 16 pixels, un logo détaillé devient flou. Utilisez le symbole de votre logo, ou sa première lettre, plutôt que le logo complet avec du texte.
- Soignez le contraste. Les onglets sont clairs ou sombres selon le thème du navigateur : vérifiez les deux aperçus.
- Surveillez les marges. Moins de marges rendent l'icône plus grande dans l'onglet ; un peu plus donne un meilleur rendu sur l'écran d'accueil des téléphones.
Vous avez plutôt besoin d'un fichier .ico d'une autre taille ? Le convertisseur d'images enregistre n'importe quelle image au format ICO.
Questions fréquentes
Comment créer un favicon ?
Ajoutez votre logo ou n'importe quelle image carrée dans la zone de cette page, ou saisissez une lettre ou un emoji. Réglez l'arrière-plan, les marges et la forme, puis téléchargez le ZIP contenant toutes les tailles d'icônes et le code HTML à coller dans votre site.
Quelles tailles faut-il pour un favicon ?
Un favicon.ico avec des versions de 16, 32 et 48 pixels couvre les navigateurs et Windows ; une apple-touch-icon de 180 pixels couvre les iPhone et iPad ; des icônes de 192 et 512 pixels couvrent Android et les applications web installées. Le pack les inclut toutes.
Comment ajouter le favicon à mon site web ?
Mettez en ligne les fichiers du ZIP dans le dossier racine de votre site, de sorte que favicon.ico s'ouvre à l'adresse votresite.com/favicon.ico. Collez ensuite les balises HTML dans la section head de vos pages.
Pourquoi mon nouveau favicon ne s'affiche-t-il pas ?
Les navigateurs conservent les favicons en cache très longtemps. Ouvrez directement l'adresse du favicon, rechargez-la ou essayez une fenêtre de navigation privée. La mise à jour dans les résultats de recherche peut prendre plusieurs semaines.
Puis-je créer un favicon à partir d'un texte ou d'un emoji ?
Oui. Choisissez « Lettre ou emoji », saisissez un ou deux caractères et sélectionnez les couleurs. C'est un moyen rapide d'obtenir une icône nette sans logo.
Mon image est-elle mise en ligne ?
Non. Toutes les icônes sont créées dans votre navigateur, et votre image ne quitte jamais votre appareil.