Pourquoi la couverture des favicons est importante
Il ne s'agit plus seulement de l'onglet du navigateur. Voici pourquoi vous avez besoin de la suite complète d'icônes.
Que sont les app icons ?
Les app icons sont les images sur lesquelles vous appuyez sur votre smartphone pour lancer une application. À mesure que des téléphones plus récents sortent avec des écrans de plus haute résolution, des app icons de plus haute résolution deviennent nécessaires. Les développeurs veulent malgré tout continuer à prendre en charge les téléphones plus anciens de résolution inférieure : ainsi, lorsque vous créez une app icon, vous devez créer plusieurs variantes de taille de la même image. Cela vaut pour tous les smartphones comme l'iPhone et Android, et même pour les tablettes comme l'iPad.
Que fait cet outil ?
Bien que de nombreux navigateurs modernes prennent en charge les favicons enregistrés en GIF, PNG ou autres formats populaires, toutes les versions d'Internet Explorer exigent encore que les favicons soient enregistrés en fichiers ICO (un format d'icône de Microsoft). Cet outil offre un moyen simple de convertir n'importe quel GIF, PNG ou JPEG en ICO, pris en charge par tous les navigateurs modernes. Il permet aussi de créer des favicons à partir de zéro via un éditeur en ligne, et d'ajuster manuellement les favicons générés pour obtenir le résultat souhaité.
Utiliser un favicon
Après avoir généré un favicon avec cet outil, téléchargez-le et enregistrez-le dans le répertoire racine de votre site. Incluez ensuite le code suivant dans le head de votre document HTML.
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">Pourquoi une couverture complète compte
| Surface | Ce que la couverture vous apporte |
|---|---|
| Écrans d'accueil mobiles | Les utilisateurs ajoutent souvent des sites à leur écran d'accueil sur iOS et Android. Sans touch icons spécifiques, votre site ressemblera à une capture d'écran générique ou à un placeholder par défaut, ce qui nuit à l'apparence professionnelle de votre marque. |
| SEO et résultats de recherche | Google et d'autres moteurs de recherche affichent souvent les favicons à côté des résultats. Une icône nette et de haute qualité peut améliorer les taux de clic et aider les utilisateurs à identifier votre marque instantanément. |
| Confiance dans la marque | L'incohérence brise la confiance. Si votre icône est nette dans un onglet mais floue dans la barre de favoris ou absente sur une tablette, cela trahit un manque d'attention aux détails. Une couverture complète garantit un branding pixel-perfect partout. |
| Intégration aux plateformes | Des tuiles du menu Démarrer de Windows aux onglets épinglés de macOS et aux listes de lecture de Safari, différents systèmes d'exploitation utilisent des formats uniques. Les fournir tous garantit que votre site paraît natif sur l'appareil de l'utilisateur. |
Voyez-le à l'œuvre
Lorsque les sites mettent en place une couverture de favicons adéquate, leurs icônes apparaissent de façon cohérente sur toutes les plateformes et dans tous les contextes. Remarquez comme les favicons de ces grandes entreprises rendent leurs liens instantanément reconnaissables dans les onglets de navigateur, les favoris, les résultats de recherche et lorsqu'ils sont partagés. Cette cohérence visuelle construit la reconnaissance de la marque et la confiance : les utilisateurs peuvent identifier votre site en un clin d'œil, même dans des listes chargées ou des résultats de recherche.
Sans une couverture de favicons adéquate, vos liens apparaîtraient comme des placeholders génériques ou des images cassées, rendant plus difficile l'identification de votre marque par les utilisateurs et réduisant les taux de clic. Voici des exemples d'entreprises qui ont investi dans une couverture complète de favicons :
netflix.com, apple.com, google.com, microsoft.com, amazon.com, meta.com, x.com, youtube.com, github.com, spotify.com, adobe.com, nvidia.com, tesla.com, uber.com, airbnb.com, stripe.com, shopify.com, notion.so, figma.com, dropbox.com, linkedin.com, instagram.com, tiktok.com, discord.com, slack.com, zoom.us, salesforce.com, oracle.com, ibm.com, intel.com, paypal.com, reddit.com et twitch.tv.
Les icônes que nous prenons en charge
Un détail de chaque type de fichier que notre outil génère et de l'endroit où il est utilisé.
| Tailles | Où elles sont utilisées | Notes |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icons, iPhone et Retina | Utilisés par diverses générations d'iPhone, pour que votre icône reste nette sur les écrans Retina haute densité. |
| 167x167, 152x152, 76x76 | Apple touch icons, iPad et tablette | Les écrans d'accueil de l'iPad affichent les icônes à des dimensions différentes de celles des téléphones. |
| 57x57, 72x72 | Apple touch icons, iOS legacy | Toujours inclus pour les appareils plus anciens qui pourraient encore circuler, afin de maximiser la compatibilité. |
| 192x192, 512x512 | Android et Chrome, via le manifest | Les appareils Android reposent sur des PNG haute résolution, et 192x192 est le standard pour les raccourcis d'écran d'accueil. Ce n'est pas toujours généré comme fichier autonome lorsqu'un manifest est présent, mais notre outil privilégie android-icon-192x192.png pour la liaison directe et l'inclusion dans le manifest, afin que les prompts « Ajouter à l'écran d'accueil » et les splash screens fonctionnent. |
| 32x32 | Favicon standard, onglets des navigateurs desktop modernes | La référence : assez de détail pour les écrans retina tout en restant léger en taille de fichier. |
| 16x16 | Favicon standard, barres d'adresse et listes de favoris | La taille classique. Essentielle pour les écrans non retina et les contextes stricts de 16px. |
| 96x96 | Favicon standard, raccourcis desktop et Google TV | Également utilisé par certains contextes de navigateur spécialisés qui nécessitent une image raster plus grande. |
| 144x144 | Tuiles Windows, ms-icon-144x144.png | Lorsqu'un utilisateur épingle votre site au menu Démarrer de Windows, Windows recherche des meta tags et des images spécifiques. Nous générons aussi les métadonnées de couleur de la tuile pour qu'elles s'accordent à la palette de votre marque. |
La même marque, aux tailles qui comptent
Autres considérations
| Considération | Détail |
|---|---|
| Web app manifest | Les fonctionnalités modernes de PWA (Progressive Web App) reposent fortement sur le fichier manifest.json. Ce fichier indique au navigateur comment votre app doit se comporter une fois installée, y compris quelles icônes utiliser. Notre outil le génère automatiquement. |
| Theme color | La meta tag theme-color personnalise la couleur de la barre d'outils du navigateur sur les appareils mobiles, offrant une expérience plus immersive qui s'accorde au design de votre site. |
| Favicons SVG | Bien que nous misions sur une large compatibilité avec les PNG, les navigateurs modernes commencent à prendre en charge les favicons SVG (link rel="icon" type="image/svg+xml"). Ils sont parfaits pour la mise à l'échelle, mais nécessitent encore des fallbacks en PNG pour une prise en charge complète, comme sur Safari ou les navigateurs plus anciens. |