Utilia
Catégories ▾
Langue: fr ▾

Générateur de favicon

Créez favicon.ico, les icônes PNG, l'apple-touch-icon et le site.webmanifest à partir d'une image ou d'un emoji, avec les balises HTML. ZIP, sans envoi.

Source

Cadrage
site.webmanifest

Comment créer un favicon

  1. Sous Source, choisissez Image ou Texte ou emoji. - Image : déposez un PNG, un JPG, un WebP ou un SVG. Un logo carré d’au moins 512 × 512 px donne le meilleur résultat. Choisissez Image entière pour l’inscrire dans l’icône, ou Remplir et recadrer pour couvrir tout le carré. - Texte ou emoji : tapez une lettre, des initiales ou un emoji, puis choisissez la Police, Gras et la Couleur du texte.
  2. Réglez la Couleur de fond ou cochez Fond transparent. Choisissez une Forme (Carré, Arrondi ou Cercle) et une Marge (%) pour laisser de l’air autour du contenu.
  3. Ouvrez au besoin site.webmanifest pour saisir le Nom de l’application (manifeste web), le Nom court, la Couleur du thème et l’URL du dossier des icônes (gardez / si les fichiers vont à la racine du site).
  4. Cliquez sur Générer les favicons. Les icônes s’affichent en taille réelle, à côté d’un onglet de navigateur factice. Ensuite, chaque modification les met à jour aussitôt.
  5. Cliquez sur Télécharger le ZIP, déposez les fichiers sur votre site, puis Copier les balises et collez-les dans le <head> de vos pages.

Contenu du ZIP

Fichier Taille Utilisé par
favicon.ico 16, 32 et 48 px Onglets, favoris, anciens navigateurs, Windows
favicon-16x16.png 16 × 16 Onglets du navigateur
favicon-32x32.png 32 × 32 Onglets sur écran haute densité, raccourcis
apple-touch-icon.png 180 × 180 Écran d’accueil de l’iPhone et de l’iPad
android-chrome-192x192.png 192 × 192 Écran d’accueil Android (manifeste web)
android-chrome-512x512.png 512 × 512 Écrans de démarrage à l’installation (manifeste web)
site.webmanifest — Nom, couleurs et icônes d’un site installable
favicon-tags.html — Les balises HTML, pour mémoire

Le fichier ICO contient trois images PNG, un format lu par Windows (depuis Vista) et par tous les navigateurs actuels. L’apple-touch-icon est toujours enregistrée sur un fond plein, car iOS affiche les pixels transparents en noir ; avec un fond transparent, c’est le blanc qui est utilisé.

Les balises HTML

Les balises générées ressemblent à ceci (avec l’URL de votre dossier) :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Les navigateurs demandent aussi automatiquement /favicon.ico à la racine du domaine : le placer là sert même sur les pages sans balises.

Conseils de conception

  • Restez simple. À 16 × 16 px, les détails disparaissent. Une seule lettre, un symbole épais ou la version la plus simple de votre logo se lisent le mieux.
  • Vérifiez l’aperçu en taille réelle. L’icône de 16 px dans l’onglet factice est celle que verront vos visiteurs.
  • Pensez au mode sombre. Un logo foncé sur fond transparent peut disparaître dans un thème sombre ; un fond coloré ou une petite marge aide.
  • Les emoji changent selon le système, car chaque plateforme les dessine à sa façon. Les PNG gardent l’aspect de votre appareil.

Questions fréquentes

Quelles tailles faut-il pour un favicon ?

En pratique : un favicon.ico en 16, 32 et 48 px, une apple-touch-icon de 180 px et des PNG de 192 et 512 px pour le manifeste web. Cet outil les crée tous à partir d’une seule source.

Puis-je partir d’un logo SVG ?

Oui. Le SVG est dessiné en haute résolution avant la création des icônes. Il est affiché comme une simple image : ses scripts ne s’exécutent jamais.

Comment faire un favicon emoji ?

Choisissez Texte ou emoji, tapez ou collez l’emoji, choisissez un fond ou gardez-le transparent, puis générez. Vous obtenez de vrais fichiers PNG et ICO, compatibles avec tous les navigateurs.

Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?

Les navigateurs gardent les favicons longtemps en cache. Rechargez en vidant le cache, ouvrez le site en navigation privée ou ajoutez une version à l’URL, par exemple /favicon.ico?v=2.

Mon image est-elle envoyée sur un serveur ?

Non. Les icônes, le ZIP et le manifeste sont créés dans votre navigateur ; rien ne quitte votre appareil.

Outils similaires