Transformez un emoji comme 🚀 en favicon en quelques secondes : choisissez la couleur de fond et une forme ronde, arrondie ou carrée, puis téléchargez les icônes ICO, PNG, SVG et Apple touch. Pratique pour un projet perso, un prototype ou un outil interne.
Mode d’emploi
- Tapez une ou deux lettres ou un emoji, ou passez à Image et déposez votre logo (le SVG donne le meilleur rendu).
- Choisissez le fond, la couleur du texte, la forme et la marge. Les aperçus se mettent à jour en direct.
- Téléchargez tout en ZIP, ou touchez un fichier pour le télécharger seul.
- Copiez le code HTML dans le <head> de votre page et placez les fichiers à la racine du site.
- favicon.ico contient des icônes 16, 32 et 48 px en PNG pour tous les navigateurs ; favicon.svg reste net à toutes les tailles.
- apple-touch-icon.png est carré et opaque, car iOS arrondit lui-même les coins.
- L’icône « maskable » garde votre logo dans la zone sûre pour qu’Android puisse la découper en n’importe quelle forme.
- Tout est généré dans votre navigateur ; votre image n’est jamais envoyée.
Ce que contient un jeu de favicons actuel
favicon.ico regroupe des images de 16, 32 et 48 px ; beaucoup de navigateurs et d’outils le cherchent encore à la racine du site. favicon.svg reste net à toute taille et sert aux navigateurs récents. apple-touch-icon.png (180 × 180) s’affiche quand on ajoute votre site à l’écran d’accueil d’un iPhone. android-chrome-192x192 et 512x512, plus une icône maskable de 512 px, sont déclarés dans site.webmanifest pour Android et les applications web installables.
L’extrait HTML les relie tous : collez-le dans le head et déposez les fichiers à la racine.
Une icône lisible à 16 px
Dans un onglet, un favicon ne mesure que 16 × 16 pixels. Une ou deux lettres épaisses, un symbole simple ou le pictogramme seul de votre logo passent bien mieux qu’un logo complet avec texte. Un fort contraste entre fond et motif aide en thème clair comme sombre. Vérifiez les aperçus d’onglet en thème clair et sombre avant de télécharger.
Icônes Apple et maskable
iOS arrondit lui-même les coins et gère mal la transparence : l’icône tactile Apple est donc carrée et opaque. Android peut découper les icônes maskable en cercle ou autre forme ; le générateur garde votre motif dans la zone de sécurité pour que rien d’important ne soit rogné.
Questions fréquentes
Quelle taille pour un favicon ?
Il en faut plusieurs : 16, 32 et 48 px dans favicon.ico, un SVG pour toutes les tailles, 180 × 180 pour Apple et 192 et 512 px pour Android. Ce générateur les crée toutes d’un coup.
Faut-il encore un favicon.ico ?
Oui. Certains navigateurs, lecteurs de flux et autres outils cherchent toujours /favicon.ico à la racine : le garder évite les icônes manquantes et les erreurs 404.
Comment ajouter le favicon à mon site ?
Déposez les fichiers du ZIP à la racine du site et collez l’extrait HTML dans le head de chaque page. Rechargez ensuite en vidant le cache pour voir la nouvelle icône.
Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?
Les navigateurs gardent longtemps les favicons en cache. Ouvrez directement l’URL de l’icône, forcez le rechargement ou testez en navigation privée. Les résultats de recherche peuvent mettre du temps à l’afficher.
Puis-je utiliser un emoji comme favicon ?
Oui. Saisissez un emoji, choisissez fond et forme, et l’icône est dessinée à partir de lui. Les emojis varient selon le système, et les fichiers gardent l’apparence de l’appareil sur lequel vous les avez créés.
Mon logo est-il envoyé ?
Non. Toutes les icônes sont dessinées et réunies dans le ZIP par votre navigateur : votre logo reste sur votre appareil.