Générateur de favicon

Toutes les tailles de favicon depuis une image

Le favicon est la petite icône visible dans les onglets, les favoris, les résultats de recherche et sur l'écran d'accueil des téléphones. Chaque endroit demande sa taille : 16 et 32 pixels pour les onglets, 180 pour les icônes Apple touch, 192 et 512 pour Android et les manifestes d'applications web. Les créer à la main est fastidieux, et les petites icônes sortent souvent floues.

Ce générateur réduit votre image par étapes, en la divisant par deux à plusieurs reprises avec un lissage de haute qualité jusqu'à chaque taille, ce qui garde les petites icônes nettes. Vous obtenez des fichiers PNG séparés, un favicon.ico contenant les tailles classiques et un ZIP qui rassemble tout.

Comment générer des favicons

1. 1

   Étape 1: Déposez une image carrée

   Un logo ou symbole carré d'au moins 512 x 512 px donne les meilleurs résultats. Le SVG fonctionne aussi.

2. 2

   Étape 2: Choisissez les tailles

   Navigateur minimal (16, 32, 48), Web standard (ajoute 96, 180 et 192) ou Toutes les tailles, ou activez-les une par une.

3. 3

   Étape 3: Générez

   Chaque taille est rendue par réduction progressive pour des contours nets.

4. 4

   Étape 4: Téléchargez

   Enregistrez les PNG un par un, le favicon.ico ou le ZIP complet.

Ce que vous obtenez

Où les favicons sont utilisés

• Onglets et favoris. Icônes de 16 et 32 px, généralement issues du favicon.ico.

• Écrans d'accueil iPhone et iPad. L'icône Apple touch de 180 px.

• Android et applications web. Icônes de 192 et 512 px déclarées dans un manifeste d'application web.

• Résultats de recherche. Google affiche votre favicon à côté des résultats, sur mobile comme sur ordinateur.

Ajouter les favicons à votre site

Placez les fichiers à la racine de votre site et ajoutez quelques lignes dans le head de vos pages. Un jeu typique : link rel="icon" href="/favicon.ico" sizes="any", link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png", et link rel="apple-touch-icon" href="/favicon-180x180.png".

Pour les applications web installables, listez les PNG de 192 et 512 px dans le tableau icons de votre manifest.json. Les navigateurs gardent les favicons longtemps en cache : une actualisation forcée peut être nécessaire pour voir la nouvelle icône.

• favicon.ico : onglets, favoris et anciens navigateurs.
• favicon-180x180.png : icône Apple touch.
• favicon-192x192.png et favicon-512x512.png : icônes du manifeste.

Une icône lisible à 16 pixels

À 16 pixels sur 16, les détails disparaissent. Un logotype complet devient illisible : utilisez un symbole simple ou une seule lettre bien contrastée. Vérifiez les aperçus à 16 et 32 px avant de télécharger.

Partez d'une image carrée. Les images non carrées sont étirées pour devenir carrées : recadrez d'abord en 1:1 avec l'outil de recadrage si votre logo est plus large que haut.

Conseils pour des favicons nets

• Utilisez un PNG transparent ou un SVG pour que l'icône s'accorde aux thèmes clairs et sombres des navigateurs.
• Épaississez les traits de votre logo pour les petites tailles si les lignes paraissent fines.
• Gardez environ 10 % de marge autour du symbole pour qu'il ne touche pas les bords.
• Remettez en ligne le favicon.ico sous un nouveau nom ou avec un paramètre de version si les navigateurs affichent toujours l'ancienne icône.

Questions sur le générateur de favicon