Générateur de favicon
Les navigateurs s'attendent à plusieurs tailles d'icônes : favicon.ico classique 16 × 16, icônes d'onglets 32 × 32, icône Apple-Touch 180 × 180 et icônes PWA 192 × 192. Téléchargez un logo carré et téléchargez un ensemble complet, généré localement sans envoyer les actifs de votre marque à un serveur.
Comment générer des favicons
1. Téléchargez un carré PNG ou JPG (512 × 512 ou plus recommandé).
2. Prévisualisez les tailles générées.
3. Téléchargez le pack d'icônes ou des fichiers individuels.
4. Ajoutez des balises de lien à votre en-tête HTML et placez les fichiers dans /public ou à la racine du site.
Exemples de configuration de favicon
Nouveau site statique
Générez favicon.ico plus 32×32 PNG et ajoutez des balises de lien standard rel="icon" à layout.html.
Manifeste PWA
Exportez 192 × 192 et 512 × 512 PNG pour le tableau d'icônes manifest.json.
Échange de changement de marque
Remplacez un logo principal et régénérez toutes les tailles pour que les onglets et les raccourcis de l'écran d'accueil correspondent.
Quand utiliser un générateur de favicon
• Lors du lancement d'un site et lorsque vous avez besoin de toutes les tailles d'icônes standard à la fois.
• Lorsque vous avez un logo raster mais pas un fichier .ico multi-tailles.
• Lorsque vous souhaitez une génération locale sans télécharger les actifs de la marque.
Quand créer des icônes à la main
• Lorsque votre logo est détaillé, simplifiez-le en une lettre pour une lisibilité 16×16.
• Lorsque les favicons SVG suffisent pour un public uniquement moderne.
• Lorsque les magasins de plate-forme nécessitent des sources PSD en couches strictement spécifiées.
Liste de contrôle des balises de lien HTML
Incluez rel="icon" pour les tailles PNG, rel="apple-touch-icon" pour iOS et éventuellement manifest.json pour les PWA. Placez les fichiers sur des chemins prévisibles (/favicon.ico aide toujours les anciens robots d'exploration).
Conception pour 16×16
Les détails fins disparaissent à la taille du favicon. Utilisez des formes audacieuses, un contraste élevé et évitez les traits fins. De nombreuses marques utilisent des variantes de monogrammes pour les petites tailles.
Suppression du cache lors du changement de marque
Les navigateurs mettent en cache les favicons de manière agressive. Renommez les fichiers ou ajoutez la requête ?v=2 lors de la mise à jour des icônes afin que les utilisateurs voient la nouvelle marque.
Questions fréquentes
Quelle doit être la taille de l’image source ?
Au moins 512×512 px carré. Les masters plus grands réduisent mieux que les petits logos.
Favicon ICO contre PNG ?
Les navigateurs modernes acceptent PNG ; .ico regroupe plusieurs tailles pour les anciens onglets Windows.
taille de l'icône Apple-Touch ?
180 × 180 px pour les raccourcis de l’écran d’accueil iOS — utilisez PNG sans transparence pour de meilleurs résultats.
Un fond transparent ?
Fonctionne pour les onglets PNG ; Les icônes d’accueil iOS peuvent avoir un cache blanc — testez sur l’appareil.
Les logos sont-ils téléchargés sur un serveur ?
Non : le redimensionnement utilise le canevas localement.
Source SVG ?
Convertissez d'abord SVG en PNG en haute résolution, puis générez des favicons.