Générateur de favicon (ICO · PNG)

Mode d’emploi

1. Choisissez une image ou déposez-la dans le cadre. PNG, JPEG, WebP, GIF et SVG sont acceptés ; une image carrée d’au moins 512 × 512 px donne le résultat le plus net.
2. Réglez la marge et les coins arrondis, et choisissez un fond transparent ou uni. La liste ci-dessous se met à jour à chaque changement.
3. Saisissez un nom d’application si vous voulez l’inclure dans site.webmanifest. C’est le nom affiché quand le site est ajouté à l’écran d’accueil du téléphone.
4. Cliquez sur « Tout télécharger (ZIP) » ou téléchargez les fichiers un par un depuis la liste.
5. Envoyez les fichiers dans le dossier racine de votre site et collez les balises de « Balises pour <head> » dans le <head> de vos pages.

Questions fréquentes

Mon image est-elle envoyée ?

Non. Le redimensionnement et l’assemblage se font uniquement dans votre navigateur.

Quels fichiers sont inclus ?

favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. Le fichier HTML contient les balises à coller.

Pourquoi apple-touch-icon.png a-t-il un fond alors que j’ai choisi transparent ?

iOS remplit les zones transparentes en noir et arrondit lui-même les coins. Cette icône reçoit donc toujours un fond uni (blanc si transparent est choisi) et pas de coins arrondis.

Mon image n’est pas carrée. Que se passe-t-il ?

Elle est redimensionnée en gardant ses proportions et centrée, avec un espace vide sur les côtés les plus courts. Recadrez-la en carré avant si vous voulez qu’elle remplisse l’icône.

L’icône est floue en 16 px.

En 16 × 16 px, les détails fins et le petit texte disparaissent. Utilisez une forme simple ou une ou deux lettres, et réduisez la marge.

Le navigateur affiche toujours l’ancienne icône.

Les navigateurs gardent le favicon en cache longtemps. Rechargez en vidant le cache ou ajoutez une version au lien, par exemple /favicon.ico?v=2.