App icon vs favicon : quelle est la différence ?
Ils se ressemblent, mais remplissent des rôles différents. Voici quand utiliser chacun et comment ils travaillent ensemble.
Comparaison côte à côte
| Aspect | Favicon | App icon |
|---|---|---|
| Usage principal | Onglets du navigateur, favoris, résultats de recherche | Écran d'accueil, sélecteur d'apps, stores d'apps |
| Où les utilisateurs le voient | Navigateurs de bureau, navigateurs mobiles | Écran d'accueil iOS, launcher Android |
| Tailles typiques | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| Format de fichier | ICO, PNG, SVG | PNG (souvent maskable) |
| Défini dans | Balises <link> HTML | manifest.json |
| Requis pour | Tous les sites | PWA, web apps installables |
Ce qu'est chacun
Un favicon (abréviation de « favorite icon ») est la petite icône qui apparaît dans les onglets du navigateur, les favoris, l'historique du navigateur et les résultats des moteurs de recherche. C'est l'identifiant visuel de votre site dans le navigateur.
Un app icon est l'icône plus grande qui apparaît sur l'écran d'accueil de l'utilisateur quand il installe votre web app en tant que Progressive Web App (PWA). Il représente votre app comme une application autonome.
Où chacun apparaît
Favicon
Start hereChaque site en a besoin, PWA ou non
- Identification dans l'onglet du navigateur
- Reconnaissance visuelle dans les favoris
- Identité visuelle dans le résultat de recherche
- Icônes dans l'historique du navigateur
- Raccourcis du bureau (Windows)
- Déclaré en HTML : <link rel="icon" href="/favicon.ico">
App icon
N'apparaît qu'une fois que quelqu'un installe l'app
- Launcher de l'écran d'accueil
- Sélecteur d'apps / multitâche
- Badges de notification
- Fiches dans les stores d'apps
- Identité visuelle du splash screen
- Déclaré dans manifest.json : "icons": [{"sizes": "192x192"}]
Les tailles de favicon à côté des tailles d'app icon
1. Exigences de taille
Les favicons sont généralement petits (16x16 à 96x96px) car ils apparaissent dans des espaces compacts comme les onglets du navigateur. Ils doivent rester reconnaissables à des tailles minuscules.
Les app icons sont bien plus grands (180x180 à 512x512px) car ils sont affichés en évidence sur les écrans d'accueil. Ils peuvent inclure plus de détails et sont souvent conçus avec des variantes maskable pour les différentes formes d'appareils.
2. Contexte d'utilisation
Les favicons sont toujours visibles pendant la navigation : ils font partie de l'interface du navigateur. Les utilisateurs les voient en permanence en passant d'un onglet et d'un site à l'autre.
Les app icons n'apparaissent qu'après l'installation. Ils représentent votre app comme une entité autonome, distincte du navigateur. Les utilisateurs les touchent pour lancer votre app en mode plein écran.
3. Implémentation technique
Les favicons sont déclarés en HTML à l'aide de balises <link> dans le head du document. Plusieurs tailles peuvent être spécifiées pour différents contextes.
Les app icons sont définis dans manifest.json, qui est référencé par le HTML. Le manifest inclut aussi d'autres métadonnées de PWA comme le nom de l'app, les couleurs de thème et le mode d'affichage.
Avez-vous besoin des deux ?
Oui, vous devriez avoir les deux. Voici pourquoi.
Les favicons sont essentiels pour tous les sites : ils améliorent la reconnaissance de la marque dans les onglets du navigateur et les résultats de recherche.
Les app icons sont requis si vous voulez que les utilisateurs installent votre site en tant que PWA. Sans eux, les invites d'installation n'apparaissent pas et l'expérience sur l'écran d'accueil est médiocre.
Ils peuvent partager le même design, mais devraient être optimisés pour leurs tailles et contextes respectifs.
Conseils de design de favicon
Gardez les designs simples : les détails se perdent en 16px.
Utilisez un fort contraste pour la visibilité.
Testez à plusieurs tailles (16x16, 32x32, 96x96).
Envisagez le SVG pour une mise à l'échelle nette.
Assurez-vous qu'il fonctionne sur fonds clairs comme sombres.
Conseils de design d'app icon
Concevez pour 192x192px minimum (512x512px recommandé).
Créez des variantes maskable pour Android.
Veillez à ce que la zone de sécurité (les 80 % internes) contienne les éléments critiques.
Utilisez une identité visuelle cohérente avec votre favicon.
Testez sur de vrais appareils pour de meilleurs résultats.