The team behind OnlineTools4Free — building free, private browser tools.
Published Jan 10, 2026 · 6 min read · Reviewed by OnlineTools4Free
Guide des Tailles de Favicon : Toutes les Tailles Necessaires
Qu'est-ce qu'un favicon et pourquoi c'est important ?
Le favicon (favorite icon) est la petite icone qui apparait dans l'onglet du navigateur, dans les favoris, dans l'historique et sur l'ecran d'accueil des telephones. C'est un element discret mais essentiel de l'identite visuelle d'un site web.
Un favicon bien concu ameliore la reconnaissance de marque, aide les utilisateurs a retrouver votre onglet parmi d'autres, et donne une impression de professionnalisme. Un site sans favicon (ou avec le favicon generique par defaut) passe pour inacheve.
Le probleme : il n'existe pas une seule taille de favicon mais une douzaine, chacune utilisee dans un contexte different. Les navigateurs desktop, les appareils iOS, Android, Windows et les PWA ont tous des exigences differentes.
Les tailles essentielles a generer
Voici les tailles incontournables, de la plus critique a la plus optionnelle :
Pour les navigateurs
- favicon.ico (16x16, 32x32, 48x48) : le format historique. Le fichier .ico peut contenir plusieurs tailles dans un seul fichier. C'est le seul format pris en charge par tous les navigateurs, y compris les plus anciens.
- favicon-32x32.png : utilise par les navigateurs modernes pour l'onglet et les favoris.
- favicon-16x16.png : taille d'affichage dans l'onglet sur la plupart des navigateurs.
Pour Apple (iOS et macOS)
- apple-touch-icon.png (180x180) : l'icone affichee quand un utilisateur ajoute votre site a l'ecran d'accueil de son iPhone ou iPad. Apple ne redimensionne pas — il faut fournir exactement 180x180 px.
Pour Android et les PWA
- android-chrome-192x192.png : icone pour l'ecran d'accueil Android.
- android-chrome-512x512.png : icone haute resolution utilisee par le splash screen des PWA.
Pour Windows
- mstile-150x150.png : icone pour les tuiles Windows (menu Demarrer, barre des taches).
Generer toutes les tailles automatiquement
Creer manuellement chaque taille est fastidieux et source d'erreurs. Notre Generateur de favicon automatise le processus :
- Ouvrez le Favicon Generator.
- Deposez votre image source (PNG ou SVG, idealement 512x512 px ou plus).
- L'outil genere automatiquement toutes les tailles necessaires.
- Telechargez le pack complet avec le code HTML a inserer dans votre
<head>.
Integrer les favicons dans votre site
Placez les fichiers a la racine de votre site, puis ajoutez ces balises dans le <head> de chaque page :
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Pour les PWA, declarez les icones dans le fichier manifest.json :
{ "icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]}
Conseils de design pour les favicons
Un favicon de 16x16 pixels est minuscule. Le design doit etre adapte :
- Simplifiez. Votre logo complet avec du texte sera illisible a 16 px. Utilisez un symbole, une lettre ou une forme simple.
- Contrastez. Le favicon s'affiche sur des fonds clairs et sombres (mode sombre). Testez les deux. Un fond de couleur vive avec un symbole blanc ou inversement fonctionne bien.
- Evitez les details fins. Les lignes fines et les petits elements disparaissent a petite taille. Privilegiez des formes pleines.
- Partez du SVG. Creez votre favicon en vectoriel, puis exportez en PNG aux differentes tailles. Le resultat sera plus net que de redimensionner un bitmap.
- Testez en contexte. Regardez votre favicon dans un onglet de navigateur a cote d'autres sites. Est-il reconnaissable ? Se distingue-t-il ?
Le favicon SVG : l'approche moderne
Les navigateurs modernes (Chrome, Firefox, Edge) supportent les favicons SVG via la balise :
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Les avantages du SVG : net a toutes les tailles, supporte le mode sombre via @media (prefers-color-scheme: dark), et pese souvent moins d'un kilooctet.
L'inconvenient : Safari ne supporte pas encore les favicons SVG. Conservez donc un fallback en .ico ou .png. Notre Generateur de favicon gere cette combinaison pour vous.
Favicon Generator
Generate favicons in all required sizes from a single image.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.