Générateur de favicon en ligne

Créer un favicon pour votre site

Le favicon est la petite icône affichée dans l'onglet du navigateur, dans les favoris et parfois à côté de votre site dans les résultats de recherche. Ce générateur de favicon fabrique tous les fichiers utiles à partir d'une image, de quelques lettres ou d'un emoji : un favicon.ico qui contient trois tailles, des PNG, l'icône pour l'écran d'accueil des téléphones, un fichier SVG quand c'est possible et le manifeste du site. Il donne aussi le code HTML. Tout se fait sur votre appareil : aucune image n'est envoyée.

Pratique pour le site d'une boulangerie, d'une association sportive ou d'un auto-entrepreneur sans graphiste.

Mode d'emploi

1. Dans « Partir de : », choisissez « Image », « Texte ou initiales » ou « Emoji ».
2. Avec « Image », cliquez sur « Choisir une image » (PNG, JPG, SVG ou WebP). Avec du texte, tapez 1 à 4 caractères puis réglez la « Police », la « Graisse » et la « Couleur du texte ».
3. Réglez la « Forme » (carrée, arrondie ou ronde), cochez ou non « Fond coloré », choisissez la « Couleur de fond », la « Marge » et la « Taille du texte ou de l'emoji ».
4. Contrôlez les « Aperçus à la taille réelle » sur fond clair et sombre.
5. Indiquez le « Nom du site », la « Couleur du thème », le « Fond de l'écran de démarrage » et le « Dossier des fichiers sur le site ».
6. Cliquez sur « Tout télécharger (ZIP) », puis sur « Copier le code » pour récupérer les balises HTML.

Les tailles nécessaires aujourd'hui

Le favicon.ico reste là pour la compatibilité : certains navigateurs et outils le cherchent directement à la racine du site, même sans balise. Celui-ci contient trois images : 16, 32 et 48 px. Les PNG de 16, 32 et 48 px servent aux navigateurs récents. L'icône de 180 × 180 px s'affiche quand un visiteur ajoute votre site à l'écran d'accueil de son téléphone ; le téléphone en arrondit lui-même les coins. Les icônes de 192 et 512 px sont déclarées dans le site.webmanifest, avec le nom du site et ses couleurs, pour l'installation comme application. Le SVG (source texte ou SVG) reste net à toutes les tailles.

Exemple : une photo de 1 200 × 800 px est recadrée en un carré de 800 × 800 px, en retirant 200 px à gauche et 200 px à droite. Avec une « Marge » de 10 %, le dessin occupe 409,6 px sur 512 et 12,8 px sur 16.

Où placer les fichiers et le code HTML

Envoyez les fichiers du ZIP à la racine de votre site : le favicon est alors à l'adresse /favicon.ico. Si vous les rangez ailleurs, par exemple dans /icones/, écrivez ce dossier dans « Dossier des fichiers sur le site » : le code et le manifeste sont mis à jour. Collez ensuite les balises dans le <head> de chaque page.

Conseils de design

• Restez simple : une lettre, deux initiales ou un symbole. Un logo complet devient une tache à 16 px.
• Vérifiez la lisibilité à 16 px dans les aperçus : c'est la taille de l'onglet.
• Soignez le contraste : fond coloré et texte blanc ou très foncé.

Pourquoi le nouveau favicon met du temps à apparaître

Les navigateurs gardent le favicon en mémoire dans un cache à part, souvent plusieurs jours. Après avoir changé d'icône, ouvrez directement l'adresse /favicon.ico puis rechargez-la, ou videz le cache du navigateur. Pour forcer tous les visiteurs, ajoutez ?v=2 à la fin de chaque adresse de fichier dans le code HTML. Dans les résultats de recherche, le nouveau favicon n'apparaît qu'après le prochain passage du moteur sur votre site.

Questions fréquentes

Le fichier favicon.ico est-il encore utile ?

Oui. Il ne coûte presque rien et sert aux navigateurs anciens et aux outils qui cherchent /favicon.ico sans lire le code de la page.

Pourquoi l'emoji n'a-t-il pas le même dessin sur mon téléphone ?

L'emoji est dessiné par la police de l'appareil qui crée l'icône. Créé sur un autre système, le même emoji aura une autre allure.

Mon image est rectangulaire : que se passe-t-il ?

Le centre est gardé et recadré en carré, en coupant autant de chaque côté. Placez le sujet au centre.

Mes réglages et mon image sont-ils enregistrés ?

Les réglages sont gardés sur cet appareil pour la prochaine visite. L'image, elle, n'est ni envoyée ni gardée.