Générateur de favicon : favicon.ico, icônes Apple et Android

Mode d'emploi

Choisissez Icône à partir de : Une image, ou Des lettres ou un emoji sur une couleur.
Sélectionnez l'image, ou saisissez les Lettres ou emoji. Réglez la Couleur de fond et la Couleur des lettres.
Réglez la Couleur du thème et le Nom du site, puis cliquez sur Créer les icônes.
Téléchargez l'archive ZIP. Placez les fichiers dans le dossier racine de votre site, et collez les Balises HTML dans l'en-tête de chaque page.

Les fichiers et leurs tailles

favicon.ico contient trois images, de 16, 32 et 48 pixels, si bien qu'un onglet de navigateur, un favori et Windows trouvent chacun une taille adaptée. apple-touch-icon.png fait 180 pixels pour l'écran d'accueil d'un iPhone ou d'un iPad. android-chrome-192x192.png et android-chrome-512x512.png sont les icônes Android listées dans le manifeste. site.webmanifest donne le nom de l'application et ses couleurs.

Transparence et fond

Le favicon garde ses zones transparentes : un logo s'affiche donc sur la couleur que le navigateur utilise. Les icônes Apple et Android sont remplies avec la couleur de fond, car un coin transparent d'une icône Apple touch apparaît en noir sur iPhone et iPad.

Où placer les fichiers

Placez les fichiers dans le dossier racine de votre site, pour que les adresses /favicon.ico et /site.webmanifest fonctionnent. Les navigateurs gardent longtemps les icônes en cache : après une modification, ajoutez un numéro de version au lien, ou videz le cache, pour voir la nouvelle icône.

Exemple : les lettres FT sur bleu foncé

Choisissez Des lettres ou un emoji sur une couleur, saisissez FT et gardez le fond bleu foncé. L'outil dessine les lettres au milieu d'un carré aux coins arrondis et les ajuste au carré, si bien qu'elles restent lisibles même dans le favicon de 16 pixels.

Questions fréquentes

Mon image est-elle envoyée lorsque je crée les favicons ?

Non. Les icônes sont dessinées dans votre navigateur et rassemblées dans l'archive ZIP sur votre appareil. Pour le vérifier, coupez votre connexion internet une fois la page chargée, puis créez un jeu d'icônes.

Quel fichier le navigateur utilise-t-il pour l'icône de l'onglet ?

Les navigateurs utilisent favicon.ico, ou une balise de lien de la page qui pointe vers un fichier PNG ou SVG. Les balises créées par cet outil désignent favicon.ico et l'icône Apple, si bien que chaque navigateur trouve une icône de taille convenable.

Pourquoi mon favicon paraît-il flou à 16 pixels ?

Une petite icône a très peu de pixels : les traits fins et les petites lettres se brouillent. Utilisez une forme simple aux traits épais, deux lettres au plus, et vérifiez les images de 16 et 32 pixels dans le fichier ICO.

Pourquoi les icônes Apple ont-elles une couleur de fond ?

Une icône Apple touch dont un coin est transparent affiche ce coin en noir sur iPhone et iPad. L'outil remplit tout le carré avec la couleur de fond que vous choisissez.

Que met-on dans l'en-tête de la page ?

Collez les quatre lignes de la zone Balises HTML dans l'élément head de chaque page. Elles relient favicon.ico, l'icône Apple, le manifeste et la couleur du thème.

À quoi sert le manifeste d'application web ?

Placez site.webmanifest dans le dossier racine de votre site. Le navigateur le lit lorsqu'un visiteur installe le site comme une application : il donne le nom de l'application, son nom court et ses couleurs, et liste les deux icônes Android.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.