Créer un favicon
Fabriquez le favicon.ico 16/32/48 d’un site, et les PNG que réclament les téléphones.
Traité sur cet appareil · aucun envoi de fichier
PNGJPGJPEGWEBPVous pouvez aussi coller (Ctrl+V)Confortable jusqu’à 50 Mo
536 ko à télécharger la première fois, puis conservé sur cet appareil.détails
Moteur : décodeurs d’images à la carte · un décodeur par format ; l’encodage repasse par les codecs jSquash.
À quoi sert cette page
Le favicon est la petite image de l’onglet, et c’est un sujet plus embrouillé qu’il n’y paraît : on lit qu’il faut dix fichiers et un manifeste, alors qu’un seul suffit vraiment. Ce fichier, c’est `favicon.ico` posé à la racine du domaine — les navigateurs vont l’y chercher tout seuls, même sans balise, et il contient plusieurs tailles pour que chacun prenne la sienne. Cette page le fabrique en 16, 32 et 48 pixels, et y ajoute au besoin les deux PNG que les téléphones demandent. Votre logo ne quitte pas votre ordinateur.
On dit aussi : générer un favicon ico, icône de site web.
Comment faire
- Déposez votre logo, dans la plus grande définition dont vous disposez.
- Choisissez d’ajouter ou non les PNG pour iOS et Android.
- Téléchargez les fichiers et posez `favicon.ico` à la racine de votre site.
Questions fréquentes
Pourquoi 16, 32 et 48 pixels, et pas plus ?
Parce que ce sont les tailles réellement utilisées. 16 pour l’onglet et la barre d’adresse, 32 pour l’onglet sur un écran à haute densité et pour les favoris de Windows, 48 pour la vignette d’un raccourci de bureau — c’est aussi le minimum que Google demande pour afficher une icône à côté d’un résultat. Les tailles supérieures servent aux icônes d’application, pas au web.
Quelles balises faut-il mettre dans le HTML ?
Pour le .ico posé à la racine, aucune n’est indispensable — les navigateurs le trouvent seuls. Si vous ajoutez les PNG mobiles : `<link rel="apple-touch-icon" href="/apple-touch-icon.png">` et `<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">`. C’est tout ce qu’il faut.
Faut-il vraiment un SVG ?
Non, et c’est un piège fréquent. Un favicon SVG n’est lu que par une partie des navigateurs, et jamais par Windows ni par les moteurs de recherche : il vient en plus du .ico, jamais à sa place. Comme un favicon s’affiche à seize pixels, le gain du vectoriel est nul.
Mon logo est illisible en petit, que faire ?
Dessinez une version simplifiée pour les petites tailles : une lettre, une forme, un symbole. C’est ce que font tous les sites dont vous reconnaissez l’onglet du premier coup d’œil. Aucun outil ne peut faire tenir un logo détaillé dans seize pixels.
Mon image est-elle envoyée sur un serveur ?
Non. La réduction et l’écriture du .ico se font dans votre navigateur, et aucune requête réseau n’est émise pendant l’opération.
Bon à savoir
- Le favicon.ico contient 16, 32 et 48 pixels, écrits en image Windows 32 bits. Ce sont les trois tailles que les navigateurs et Windows utilisent réellement ; au-delà, il s’agit d’une icône d’application, et « convertir un PNG en ICO » propose jusqu’à 256.
- Un logo comportant du texte ou des traits fins sera illisible en 16 pixels. Aucune méthode de réduction n’y change quoi que ce soit : les icônes de sites bien faites sont un symbole simple, pas un logo miniaturisé.
- Les PNG mobiles sont produits à 180 et 192 pixels exactement, les tailles que réclament iOS et Android. Ils gardent la transparence, ce qu’Apple n’aime pas toujours : un fond opaque donne un meilleur rendu sur l’écran d’accueil d’un iPhone.
- Aucun fichier manifest.json ni aucune balise HTML n’est généré. Les deux lignes à coller sont données dans la FAQ.