Un bref historique du favicon
Le favicon (abréviation de « icône préférée ») a été introduit par Internet Explorer 5 en 1999 sous la forme d'un fichier ICO 16×16 affiché dans la barre d'adresse. Le W3C l'a standardisé en 2000 à l'aide de l'élément HTML .
Au cours des deux décennies suivantes, l'exigence s'est considérablement élargie :
- 2007 : Apple a introduit l'icône Apple Touch (57 × 57 PNG) pour les favoris iOS
- 2010 : Android Chrome a ajouté la prise en charge des applications Web icônes
- 2012 : Windows 8 a introduit des icônes de vignette pour les applications Metro épinglées
- 2019 : Les favicons SVG sont désormais pris en charge par les navigateurs, ce qui permet une prise en charge indépendante de la résolution et du mode sombre. favicons
- 2023 : Exigences d'installation de PWA standardisées à 192 × 192 et 512 × 512
Toutes les tailles de favicon requises en 2026
| Fichier | Taille | Objectif |
|---|---|---|
| favicon.ico | 16×16, 32 × 32, 48 × 48 (multi-résolution) | Onglet Navigateur, IE/ancien solution de secours |
| favicon-16x16.png | 16×16 | Petit navigateur onglet |
| favicon-32x32.png | 32×32 | Onglet Navigateur, navigateur barre d'outils |
| apple-touch-icon.png | 180×180 | favoris et accueil iOS/macOS Safari écran |
| android-chrome-192x192.png | 192×192 | Accueil Android Chrome écran |
| android-chrome-512x512.png | 512×512 | Android PWA splash écran |
| mstile-150x150.png | 150×150 | Menu Démarrer de Windows 8/10 tuile |
| safari-pinned-tab.svg | SVG | Onglets épinglés Safari (noir et blanc SVG) |
| favicon.svg | SVG | Navigateurs modernes, mode sombre adaptatif |
Favicons SVG : prise en charge du mode sombre adaptatif
Les favicons SVG prennent en charge les requêtes multimédias CSS, activant les icônes réactives en mode clair/sombre :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>Ce SVG affiche automatiquement une icône lumineuse en mode clair et une icône sombre en mode sombre — parfait pour les logos qui doivent s'adapter aux thèmes du système.
Générer un ensemble complet de favicon sur ToolDolfen
- Ouvrez le Générateur de Favicon (Favicon Generator).
- Téléchargez un fichier PNG carré haute résolution (512 × 512 ou 1 024 × 1 024 recommandé – source plus grande = meilleure qualité du tout tailles).
- Le générateur produit un package ZIP complet contenant :
– Toutes les tailles PNG requises – Fichier ICO (multi-résolution) – Modèle JSON de manifeste Web – Extraits de code HTML pour la mise en œuvre de
- Extractez le ZIP et placez les fichiers dans le répertoire public de votre projet.
- Ajoutez les extraits HTML fournis à votre
.
Guides complémentaires recommandés
Explorez les didacticiels et utilitaires complémentaires de ce groupe de sujets pour améliorer votre flux de travail numérique :