Générateur de favicons

À propos de cet outil

Ce générateur crée tous les fichiers d'icônes dont un site a besoin à partir d'une seule image : PNG de 16, 32, 48, 180, 192 et 512 pixels, favicon.ico multi-résolution, icône Apple, icône adaptative « maskable » pour Android, fichier site.webmanifest et balises HTML prêtes à coller. Vous choisissez le cadrage (image entière avec marge ou recadrage au centre), la couleur de fond, la transparence, le nom du site et la couleur du thème. Si votre image est un SVG, il est aussi fourni tel quel, pour les navigateurs qui acceptent un favicon vectoriel. Tout est calculé dans votre navigateur ; l'image n'est pas envoyée.

Comment utiliser cet outil

1. Importez une image carrée de préférence, d'au moins 512 × 512 px (PNG, JPG, WebP ou SVG).
2. Choisissez le cadrage, la marge, la couleur de fond et la transparence, et renseignez le nom du site et la couleur du thème.
3. Vérifiez l'aperçu de chaque taille, surtout les plus petites (16 et 32 px) : le dessin doit rester lisible.
4. Téléchargez l'archive ZIP, déposez les fichiers à la racine du site et collez les balises dans le <head>.

À quoi servent les favicons, et lesquels faut-il vraiment ?

Un favicon est la petite icône qui représente un site : dans l'onglet du navigateur, dans les favoris, dans l'historique, sur l'écran d'accueil d'un téléphone et, pour Google, à côté de votre lien dans les résultats de recherche mobiles. Longtemps, un seul fichier favicon.ico suffisait. Aujourd'hui, plusieurs appareils attendent des formats différents, mais un petit nombre de fichiers couvre l'essentiel :

Placez ces fichiers à la racine du site (/favicon.ico…) et collez les balises générées dans le <head> de vos pages. Le fichier /favicon.ico à la racine est de toute façon demandé automatiquement par de nombreux navigateurs, même sans balise.

Concevoir une icône lisible en 16 pixels

• Simplifiez. À 16 × 16 pixels, il reste 256 points : un logo détaillé devient une tache. Utilisez une seule forme forte, une initiale ou un symbole, sans texte.
• Contraste et couleurs franches. Les onglets existent en thème clair et sombre : une icône noire sur transparent disparaît dans le thème sombre. Un fond uni (un carré ou un cercle de couleur) assure la visibilité dans tous les cas.
• Partez d'une image carrée de 512 × 512 px minimum. Google demande un favicon carré (1:1), d'au moins 8 × 8 pixels, et recommande plus de 48 × 48 pixels.
• Si l'image n'est pas carrée, choisissez le cadrage : « Image entière avec marge » conserve le logo et laisse des marges (bande transparente ou colorée), « Recadrer au centre » remplit tout le carré en coupant les bords.
• Regardez l'aperçu des petites tailles avant de télécharger : c'est là que l'icône se joue.

Icônes d'application : Apple et Android

• Apple (180 × 180). L'icône d'écran d'accueil iOS doit être opaque : les zones transparentes sont remplies, souvent en noir, de façon imprévisible. L'outil l'enregistre donc toujours avec votre couleur de fond. Apple applique lui-même les coins arrondis : ne les dessinez pas.
• Android et applications web (192 et 512). Ces icônes sont déclarées dans le manifeste. Sans indication particulière, une icône transparente s'affiche sur un fond blanc, dans un cercle.
• Icône « maskable ». Android découpe les icônes selon la forme choisie par le constructeur ou l'utilisateur (cercle, carré arrondi…). Une icône déclarée avec "purpose": "maskable" doit couvrir tout le carré avec un fond plein, et placer le dessin important dans un cercle central dont le rayon est de 40 % de la largeur ; les 10 % extérieurs peuvent être rognés. L'outil inscrit votre image dans une zone un peu plus petite (marge d'environ 21 %) pour respecter ce cercle.
• Le manifeste. Le fichier site.webmanifest indique le nom complet, le nom court (à utiliser sous l'icône, 12 caractères environ au maximum), les icônes, la couleur du thème (la barre du navigateur) et la couleur de fond de l'écran de démarrage. Personnalisez-les dans l'outil avant de télécharger.

Pour qu'un site soit installable comme application, il faut en plus le HTTPS, un manifeste valide avec ses icônes et, selon les navigateurs, un service worker ; Outilia lui-même s'installe ainsi sur l'écran d'accueil.

Mettre en ligne et vérifier

1. Téléchargez l'archive ZIP et décompressez-la.
2. Copiez les fichiers d'icônes et site.webmanifest à la racine du site, au même niveau que la page d'accueil. Sur un CMS (WordPress, Shopify, Wix…), utilisez plutôt le réglage « icône du site » du thème, et téléversez l'image de 512 px.
3. Collez le contenu de head-snippet.html dans le <head> de vos pages (dans le modèle commun du site, pas page par page).
4. Videz le cache : les navigateurs gardent très longtemps les favicons. Rechargez la page en forçant l'actualisation (Ctrl+F5), voire en ouvrant directement l'adresse de l'icône pour la rafraîchir.
5. Vérifiez dans les outils de développement (onglet « Application », « Manifeste ») que les icônes sont lues sans erreur, et dans la page d'accueil que la balise rel="icon" est bien présente.

Pour d'autres besoins d'image, voir le redimensionneur et le convertisseur de format.

Questions fréquentes