Optimiser

Générateur de favicon

Transformez un logo, une image ou quelques lettres en toutes les icônes dont un site a besoin : onglet du navigateur, favoris, écrans d'accueil iPhone et Android, avec le HTML pour les ajouter.

Aperçu, puis vérification

Voyez l'icône dans des onglets clairs et sombres et sur les écrans d'accueil des téléphones avant de la télécharger. Chaque fichier est d'abord relu et vérifié.

Comment ça marche

Créer, prévisualiser, télécharger

Partez d'une image ou de lettres. Ajoutez un logo (idéalement un SVG ou un PNG de 512 pixels ou plus), ou tapez jusqu'à trois lettres.
Donnez-lui une forme. Carré, arrondi ou cercle, fond transparent ou coloré, et marge autour.
Vérifiez les aperçus. Onglets en mode clair et sombre, les vraies tailles 16, 32 et 48 pixels, et les écrans d'accueil iPhone et Android.
Téléchargez et ajoutez. Téléchargez le ZIP, envoyez les fichiers sur votre site et collez le HTML dans le <head> de chaque page.

Ce que vous obtenez

Les fichiers et le rôle de chacun

favicon.ico avec des images de 16, 32 et 48 pixels : l'icône classique que tout navigateur cherche.
favicon-16x16.png et favicon-32x32.png pour les onglets et les favoris.
apple-touch-icon.png (180 pixels, jamais transparent) pour les écrans d'accueil iPhone et iPad.
android-chrome-192x192.png et 512x512.png, plus une icône maskable qu'Android peut découper en cercle ou en carré arrondi sans couper votre motif.
site.webmanifest avec le nom et les couleurs du site, pour l'installer comme une application.
favicon.svg si vous partez d'un SVG, pour une icône nette à toute taille dans les navigateurs récents.

Bon à savoir

Une favicon lisible à 16 pixels

Un onglet affiche l'icône à 16 pixels, à peu près la taille d'une lettre. Les détails fins et les mots longs y disparaissent : choisissez un signe simple, une à trois lettres ou la partie la plus reconnaissable de votre logo. Un fort contraste aide, et un fond plein garde l'icône visible sur les onglets clairs comme sombres. L'outil vous prévient si une image est trop petite ou si des lettres sont peu lisibles.

Outils associés

Plus pour votre site

FAQ

Questions sur les favicons.

Quelle taille doit faire une favicon ?

Il n'y a pas une seule taille : les navigateurs utilisent 16 et 32 pixels pour les onglets, Windows 48 pixels, les iPhone 180 pixels et Android 192 et 512 pixels. Partez d'une image d'au moins 512 pixels, ou d'un SVG, et cet outil les crée toutes.

Comment ajouter une favicon à mon site ?

Envoyez les fichiers du ZIP sur votre site, généralement dans le dossier principal, puis collez le HTML affiché ici dans le <head> de chaque page. Si vous placez les fichiers dans un autre dossier, indiquez-le dans Informations du site et le HTML s'adapte.

Ai-je encore besoin de favicon.ico ?

Oui, il vaut mieux l'inclure. Certains navigateurs, lecteurs de flux et outils demandent directement /favicon.ico sans lire votre HTML. Le fichier créé ici contient des images de 16, 32 et 48 pixels dans un seul fichier.

Qu'est-ce qu'une icône maskable ?

Android affiche les icônes d'application sous différentes formes, comme des cercles ou des carrés arrondis, selon le téléphone. Une icône maskable a une marge supplémentaire autour du motif, de sorte que la découpe dans l'une de ces formes ne coupe jamais votre logo. L'aperçu Android la montre découpée en cercle.

Pourquoi ma favicon ne change-t-elle pas dans le navigateur ?

Les navigateurs gardent les favicons longtemps. Après l'envoi, ouvrez directement l'adresse de l'icône, rechargez avec Ctrl+F5 ou Maj+actualiser, ou essayez une fenêtre privée. Changer le nom du fichier, ou ajouter ?v=2 aux liens, force chaque navigateur à charger la nouvelle.

Mes images sont-elles envoyées ?

Non. Les icônes sont dessinées dans votre navigateur à partir de votre image ou de vos lettres. L'image, les icônes et les informations du site ne sont jamais envoyées nulle part.