Un set de favicons qui marche partout en 2026
Six tailles, un .ico, un manifest — tout ce qu'il te faut vraiment pour livrer une favicon qui rend bien sur tous navigateurs, écran d'accueil iOS, et barre des tâches Windows en 2026.
Les favicons paraissent triviaux. Livre-en une et cent cas limites surgissent : l'icône écran d'accueil iOS est floue, l'onglet Chrome Android est de la mauvaise couleur, les épingles Windows affichent un 16×16 baveux. Ce guide tranche dans le bruit et couvre exactement ce qu'il te faut en 2026 — ni plus, ni moins.
Le set minimum viable
Six assets couvrent toutes les surfaces qui afficheront l'icône de ton site :
favicon.ico— container multi-tailles avec 16×16, 32×32, 48×48 à l'intérieur (navigateurs legacy, Windows Explorer, onglets épinglés).favicon-16x16.png,favicon-32x32.png— onglets navigateurs modernes.apple-touch-icon.png(180×180) — écran d'accueil iOS, liste de lecture Safari.android-chrome-192x192.png,android-chrome-512x512.png— écran d'accueil Android, prompts d'install PWA.site.webmanifest— la config PWA qui pointe vers les icônes Android et définit la couleur thème.
C'est tout. Tout le reste (SVG onglet épinglé Safari, variantes Apple touch, images Windows tile) est legacy. Les navigateurs modernes tombent proprement sur le PNG 192 ou 512.
Pourquoi le .ico survit en 2026
Un fichier .ico est un container binaire pouvant contenir plusieurs PNG à différentes tailles. Quand un navigateur demande /favicon.ico (certains le font encore par défaut), il reçoit les trois tailles en une requête. Le rendu choisit celle qui convient — 48×48 pour Windows Explorer, 16×16 pour un onglet.
Un PNG renommé .ico ne contient qu'une taille. Ça marche en gros parce que les navigateurs pardonnent, mais Windows Explorer et certains clients mail rendront flou ou refuseront d'afficher. Livre un vrai .ico pour la cohérence.
Ce que fait site.webmanifest
Quand un utilisateur ajoute ton site à son écran d'accueil Android ou l'installe en PWA, le navigateur lit site.webmanifest pour savoir comment l'app installée doit apparaître. Il définit :
name/short_name— le label sous l'icône.icons— quels PNG utiliser à quelle taille.theme_color— couleur de la barre de statut quand l'app est ouverte.background_color— fond du splash screen au lancement.display— généralementstandalonepour que l'app ouvre sans chrome navigateur.
Sans manifest, Android tombe sur l'apple-touch-icon et ouvre ton site dans une fenêtre de navigateur. Avec, ça ressemble à une app native.
Le snippet HTML
Chaque fichier va à la racine web. Chaque site a besoin de ce bloc dans <head> :
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#TON_HEX">Designer pour le 16×16
Ton beau logo détaillé meurt à 16 pixels. Les règles pour une favicon qui lit clairement à cette taille :
- Une forme. Un cercle, un carré, ou un monogramme fort. Évite les formes composées.
- Contraste fort. Avant-plan et arrière-plan doivent être séparés au moins WCAG AA. Les gradients subtils disparaissent.
- Marge de sécurité. Laisse 10–20 % de padding. Les navigateurs ajoutent souvent une bordure de 1px.
- Du texte ? Une seule lettre bold marche mieux qu'un mot entier à 16px.
Le générateur de Favicon aukimi produit les six fichiers et le snippet HTML à partir d'une image ou d'une lettre en moins de 30 secondes. Il génère un vrai .ico multi-tailles (selon la spec Microsoft ICONDIR), pas un PNG renommé. Upload, choisis tes tailles, télécharge le bundle, colle le snippet — fini.
Erreurs courantes
- Servir le
.icodepuis un CDN sans headers de cache. Les navigateurs cachent agressivement les favicons. Utilise une URL versionnée (?v=2) pour forcer un rafraîchissement après redesign. - Icônes différentes par sous-domaine. Une seule
favicon.icoau TLD est généralement ce que les utilisateurs attendent — ne fragmente pas ton identité. - Oublier la meta
theme-color. Chrome mobile teinte le chrome du navigateur avec cette valeur. Sans, tu te retrouves avec le gris par défaut.
Une bonne favicon est ennuyeuse dans le bon sens — les utilisateurs la remarquent quand elle manque ou est fausse, jamais quand elle est juste. Livre les six fichiers et passe à autre chose.
Vous avez aimé cet article ?
Articles similaires
La stack créative vient de s'effondrer : une semaine d'outils IA, fin avril 2026
Entre le 27 avril et le 4 mai 2026, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen et Anthropic ont tous franchi le même seuil en huit jours. Voici ce qui a été lancé, ce que cela signifie, et ce que cela laisse aux suites créatives navigateur qui essaient de tout consolider.
Musique et SFX par IA en 2026 : ce qui marche vraiment dans l'audio des jeux indé
Il y a trois ans, l'audio de jeu indé voulait dire soit licencier des bibliothèques royalty-free (pas cher, générique, tous les jeux sonnent pareil) soit embaucher un compositeur (top, cher). En 2026, l'IA génère du score qui ship. Voilà quels outils livrent — et où un humain gagne encore.
Génération de mesh par IA en 2026 : ce qui passe vraiment en pipeline de jeu
L'image-vers-3D est passé de "démo bizarre" à "expédié dans des projets indé" en 18 mois. Voilà ce que Tripo, Meshy, Rodin et Hyper3D font vraiment en production — et où l'artiste 3D bat encore le modèle à chaque fois.