Guide des taillesGénérateur de favicon

Tailles de favicon : quels fichiers préparer, et en combien de px

Pourquoi tant de fichiers de favicon ?

Le favicon est la petite icône de votre site : dans l'onglet du navigateur, la liste des favoris, les résultats de recherche et l'écran d'accueil du téléphone. C'est le visage du site ; sans lui, quelque chose paraît inachevé.

Le hic, c'est que chacun de ces emplacements exige une taille et un format différents. Un favicon n'est donc pas un fichier, mais un petit ensemble de fichiers.

L'ensemble à préparer

favicon.ico — 16, 32 et 48px réunis dans un seul fichier. Utilisé par la barre d'adresse, les onglets et les favoris ; le plus ancien standard, toujours indispensable
PNG en 16px et 32px — les versions nettes que les navigateurs modernes affichent dans les onglets
apple-touch-icon en 180px — utilisé quand on ajoute votre site à l'écran d'accueil d'un iPhone ou iPad
PNG en 192px et 512px — pour l'écran d'accueil Android et l'installation PWA, déclarés dans site.webmanifest

Déposez un logo et obtenez favicon.ico, l'icône Apple touch et les icônes PWA dans un ZIP, plus le HTML pour votre site. Tout se déroule dans le navigateur.

Générer le jeu complet de favicons

Sans installation ni inscription · Tout se passe dans votre navigateur, les fichiers ne partent jamais vers un serveur

Comment préparer l'image d'origine

La bonne méthode : partir d'une grande image carrée (512px ou plus) et réduire. Agrandir une petite image ne fait que la rendre floue.

Elle doit rester reconnaissable à 16px : plus c'est simple, mieux c'est. Un symbole vaut mieux qu'un logo chargé de texte, une petite marge évite l'effet tassé, et un fond transparent s'accorde aux thèmes clair comme sombre.

Les ajouter au HTML

Déposez les fichiers à la racine du site et déclarez-les avec des balises link dans le head : rel="icon" pour l'ICO et les PNG, rel="apple-touch-icon" pour l'icône 180px et rel="manifest" pour site.webmanifest.

À défaut, la plupart des navigateurs trouvent un favicon.ico placé à la racine même sans balise. Mais pour que les PNG par taille et les icônes d'écran d'accueil fonctionnent bien, ajoutez les balises.

Ne fabriquez pas le jeu à la main

Redimensionner image par image et assembler l'ICO à la main est fastidieux. Déposez une seule image dans le générateur de favicons d'Image Converter NOW : il produit favicon.ico, tous les PNG, site.webmanifest et les balises HTML prêtes à coller, dans un seul ZIP.

Tout se passe dans votre navigateur : votre logo n'est jamais envoyé sur un serveur.