[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:fr:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-fr-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Tailles des favicons : Lesquelles vous avez réellement besoin en 2025","Un guide en français clair sur les tailles des favicons : 16x16, 32x32, 180x180, 192 et 512, lesquelles les navigateurs modernes utilisent, et le HTML à intégrer.","2026-10-12","favicon size","favicon-generator","\u003Cp>Cherchez « favicon size » et vous obtenez un flot de chiffres contradictoires : 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. La plupart de ces listes ont été écrites il y a une décennie et jamais mises à jour. En pratique, un site moderne a besoin d'environ quatre fichiers, et vous pouvez les créer tous en une seule opération avec le \u003Ca href=\"\u002Ffr\u002Ffavicon-generator\">générateur de favicon\u003C\u002Fa> — il fonctionne entièrement dans votre navigateur, donc votre logo ne quitte jamais votre machine.\u003C\u002Fp>\n\u003Cp>Voici à quoi correspond chaque taille, et ce que vous pouvez ignorer sans risque.\u003C\u002Fp>\n\u003Ch2>Les tailles qui comptent encore\u003C\u002Fh2>\n\u003Ch3>16x16 et 32x32 — onglets de navigateur et signets\u003C\u002Fh3>\n\u003Cp>C'est le favicon classique. 16x16 est ce que vous voyez dans une bande d'onglets chargée ; 32x32 est utilisé sur les écrans haute résolution, la barre de signets et certaines interfaces de barre d'adresse. Les deux sont traditionnellement regroupés dans un seul fichier \u003Ccode>favicon.ico\u003C\u002Fcode>, qui peut contenir plusieurs résolutions à la fois. Windows extrait également 48x48 du même \u003Ccode>.ico\u003C\u002Fcode> pour les raccourcis de bureau, donc l'inclure ne coûte presque rien.\u003C\u002Fp>\n\u003Ch3>180x180 — icône Apple touch\u003C\u002Fh3>\n\u003Cp>Quand quelqu'un appuie sur « Ajouter à l'écran d'accueil » sur un iPhone ou iPad, Safari cherche \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> à 180x180. Si elle n'y est pas, iOS prend une capture d'écran de votre page et l'utilise à la place, ce qui semble horrible. Ce PNG couvre chaque appareil iOS actuel car le système le réduit selon les besoins.\u003C\u002Fp>\n\u003Ch3>192x192 et 512x512 — Android et PWAs\u003C\u002Fh3>\n\u003Cp>Android Chrome et les applications web installables lisent les icônes à partir de votre \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 est l'icône d'écran d'accueil ; 512 est utilisé pour l'écran de démarrage et les listes d'applications. Si vous voulez jamais que votre site soit installable, vous avez besoin des deux.\u003C\u002Fp>\n\u003Ch3>SVG — optionnel mais intéressant\u003C\u002Fh3>\n\u003Cp>Firefox et Chrome supportent tous les deux une favicon SVG, qui reste nette à n'importe quelle taille et peut s'adapter au mode sombre avec une requête média à l'intérieur du fichier. C'est un bonus, pas un remplacement — Safari et les navigateurs plus anciens veulent toujours les versions raster.\u003C\u002Fp>\n\u003Ch2>Ce que vous pouvez ignorer\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, tout l'ensemble d'images de tuiles Windows, et la douzaine de fichiers hérités de style \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>. Ils étaient nécessaires pour les appareils qui ont largement disparu. Livrer vingt fichiers d'icônes encombre votre dépôt et ne vous apporte rien de mesurable.\u003C\u002Fp>\n\u003Ch2>Le HTML\u003C\u002Fh2>\n\u003Cp>Déposez les fichiers à la racine de votre site et ajoutez ceci à \u003Ccode><head>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Et dans le manifeste :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Concevoir pour 16 pixels\u003C\u002Fh2>\n\u003Cp>Le plus difficile n'est pas l'export, c'est qu'un logo complet devient pâteux à 16x16. Quelques points qui aident :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Utilisez un fragment, pas le logo entier.\u003C\u002Fstrong> Une lettre, un glyphe, une forme. Les wordmarks sont illisibles à la taille de l'onglet.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Commencez en carré.\u003C\u002Fstrong> Si votre source est un logo large, \u003Ca href=\"\u002Ffr\u002Fcrop-image\">recadrez-le en carré\u003C\u002Fa> d'abord pour que le générateur ne le mette pas en lettrage avec de l'espace vide.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Gardez le contraste élevé.\u003C\u002Fstrong> Les contours fins disparaissent. Les formes pleines survivent.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Décidez du fond.\u003C\u002Fstrong> Un PNG transparent s'adapte au chrome clair et sombre du navigateur ; si votre marque est sombre, envisagez plutôt de lui donner une tuile de couleur unie. Vous pouvez \u003Ca href=\"\u002Ffr\u002Fremove-background\">supprimer le fond\u003C\u002Fa> d'une capture d'écran de logo en quelques secondes si vous n'avez qu'un JPG plat.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Respectez la zone de sécurité.\u003C\u002Fstrong> Android masque les icônes en cercles et squircles, donc laissez environ 10% de remplissage autour du bord de votre artwork 512.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si vous faites correspondre le fond du favicon à la couleur de marque de votre site, le \u003Ca href=\"\u002Ffr\u002Fcolor-picker\">sélecteur de couleur d'image\u003C\u002Fa> extraira le hex exact d'une capture d'écran existante — pratique aussi pour la balise meta \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Générez l'ensemble complet en une seule opération\u003C\u002Fh2>\n\u003Cp>Ne téléchargez rien : déposez un PNG ou SVG carré dans le \u003Ca href=\"\u002Ffr\u002Ffavicon-generator\">générateur de favicon gratuit basé sur navigateur\u003C\u002Fa> et il produit le \u003Ccode>.ico\u003C\u002Fcode>, l'icône Apple touch, et les PNG 192\u002F512 localement, dans votre propre onglet. Rien n'est envoyé à un serveur, il n'y a pas d'inscription, et aucune copie de votre logo non publié ne finit assis dans le compartiment de stockage de quelqu'un d'autre.\u003C\u002Fp>\n\u003Cp>Puis dézoomez votre navigateur, regardez l'onglet, et posez la seule question qui compte : pouvez-vous dire ce que c'est ?\u003C\u002Fp>\n",1791831540848]