Guides du favicon
Des réponses concrètes aux questions qu'on se pose au moment de créer un favicon : quelles tailles, quels formats, quel code coller.
Tailles de favicon : formats et usages
Chercher « taille favicon » renvoie encore des listes de quinze fichiers héritées de 2014. En pratique, six dimensions suffisent aujourd'hui pour couvrir les onglets, les résultats de recherche, iOS, Android et les PWA. Voici lesquelles, et pourquoi.
Lire le guideConvertir un PNG en ICO, gratuitement
Le .ico reste le format attendu à la racine d'un site, et la plupart des convertisseurs en ligne demandent d'envoyer votre image sur leur serveur. Voici comment obtenir un favicon.ico multi-tailles correct à partir d'un PNG, sans rien téléverser.
Lire le guideapple-touch-icon : taille, format et code
L'icône Apple Touch fournit explicitement l'image utilisée lorsqu'un visiteur ajoute votre site à l'écran d'accueil de son iPhone. Elle reste distincte du favicon d'onglet et des icônes déclarées dans le manifeste web.
Lire le guideFavicon en mode sombre avec un SVG
Un logo noir sur fond transparent est parfait sur un onglet clair, et invisible sur un onglet sombre. Le format ICO ne sait pas s'adapter, mais le favicon SVG le peut : il embarque une règle CSS qui change les couleurs selon le thème du navigateur.
Lire le guideAjouter un favicon en HTML
Un favicon HTML fiable ne dépend pas d'une balise magique, mais d'un petit ensemble de fichiers accessibles et de liens placés dans le head. Cette procédure couvre les onglets modernes, les clients plus anciens et les raccourcis mobiles sans multiplier les variantes historiques.
Lire le guideFavicon absent ou non mis à jour
Quand un favicon manque, le fichier n'est pas toujours en cause. Le navigateur, un CDN, un service worker et un moteur de recherche peuvent chacun conserver une version différente. Un diagnostic ordonné évite de modifier plusieurs éléments à la fois.
Lire le guideFavicons avec Next.js App Router
L'App Router peut produire les balises d'icône depuis des fichiers conventionnels ou depuis l'objet metadata. Les deux approches sont valides, mais les mélanger sans règle claire crée facilement des déclarations concurrentes.
Lire le guideGuide du favicon SVG
Le SVG garde des contours nets à toutes les densités et peut adapter ses couleurs au thème. Cette souplesse vient avec une contrainte : le fichier doit rester autonome, simple et lisible dans un espace minuscule.
Lire le guide