Générateur d'icônes de site : d'un prompt à toutes les tailles de favicon
Une icône de site passe trois examens en même temps : 16 pixels dans un onglet de navigateur, un multiple de 48 pixels dans les résultats mobiles de Google, 180 pixels sur l'écran d'accueil d'un iPhone. Décrivez le symbole une fois, et le générateur d'icônes de site le décline à chaque taille de favicon, exportée depuis un master de 1024px.
Exemples d'icônes de site et favicons
Des marques créées pour de vrais sites et applications web, en styles flat, line-art, verre et minimaliste, nettes de 512 px jusqu'à l'onglet de 16 px.
Affinez votre icône de site sur un canevas infini
Un favicon vit en 16 px, les détails décident de tout. Générez sur le canevas, déclinez des variantes, détourez en un clic et confrontez chaque candidate aux vraies tailles d'onglet avant d'exporter la série complète.
Arbre de filiation visuel (Visual Lineage)
Suivez les itérations de prompts et variantes remix via des courbes de Bézier pour comparer éclairage, texture et couleurs côte à côte.
Post-traitement intégré (Post-Processing)
Détourage instantané en 1 clic et remplissage de couleur précis pour satisfaire l'interdiction de transparence d'Apple App Store.
Protection de la zone sûre (Safe Zone)
Guides de marge intérieure ajustables protégeant les éléments graphiques clés contre le rognage des coins du système.
Exemples de prompts pour icône de site
Copiez l'un de ces prompts dans le générateur d'icônes de site, puis remplacez les mots de sujet, de style et de couleur par les vôtres. Un bon prompt d'icône de site dit trois choses : le sujet, le style et la palette, et le fait que le symbole doit rester lisible à 16 pixels.
Lettermark minimaliste
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
Marque de boutique sympathique
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
Favicon glassy pour SaaS
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
Créer une icône de site en 3 étapes
D'une phrase au jeu de favicons complet : le générateur d'icônes de site gère les tailles, sans ouvrir un éditeur d'images.
- 1
Décrivez le symbole
Résumez sujet, style et couleurs en une phrase, par exemple "a flat compass mark, navy on white, site icon for a travel planner". Plus la forme décrite est simple, plus l'IA s'approche de la silhouette nette qu'exige un favicon.
- 2
Générez le master 1024, puis vérifiez en petit
Générez en 1024x1024 et regardez le résultat à 16 et 32 px avant de trancher. L'onglet est la maison de l'icône ; un symbole qui ne marche qu'en grand y échoue.
- 3
Exportez le jeu de favicons complet
Exportez en une passe l'ICO multi-tailles, l'icône Apple touch de 180px, les PNG 192 et 512 du manifest et le WEBP moderne, puis mettez-les en ligne ou dans votre dépôt.
Tailles et formats de l'icône de site, tout dans un tableau
Navigateurs, Apple, Android et Google Search viennent chercher des fichiers différents, et un générateur d'icônes de site doit tous les fournir. Voici les chiffres en vigueur.
| Surface | Ce que vous livrez | Règles de format | Où cela apparaît |
|---|---|---|---|
| Onglet du navigateur | PNG de 16x16 et 32x32 px | Carré ; un seul glyphe au contraste fort, car c'est la plus petite surface que votre icône remplira jamais | Barre d'onglets et titre de fenêtre ; Chrome utilise 16 px sur écran standard et 32 px en HiDPI |
| favicon.ico classique | Un ICO multi-tailles réunissant 16, 32 et 48 px | Posé à la racine du site sous /favicon.ico, pour que les outils qui ne lisent aucune balise link le trouvent quand même | Vieux navigateurs, lecteurs et crawlers qui demandent le fichier racine directement |
| Résultats Google Search | Fichier carré, côté multiple de 48 px : 48, 96, 144 ou 192 px | PNG, ICO, GIF, JPEG ou SVG ; doit être explorable, déclaré dans le head de la page d'accueil et représenter visuellement le site | À côté des noms de site dans les résultats mobiles ; les icônes hors règles de taille ou de marque sont retirées |
| Icône Apple touch | PNG de 180x180 px | Carré plein sans transparence ; iOS arrondit les coins et le pose tel quel sur l'écran d'accueil | Raccourcis d'écran d'accueil iOS et favoris |
| Web manifest (PWA) | PNG de 192x192 et 512x512 px | Déclarés dans le web manifest ; gardez le contenu dans la zone sûre masquable, car Android recadre à sa forme | Invitations d'installation Android, icônes d'accueil et écrans de démarrage |
| Icône SVG | Un SVG carré de n'importe quelle taille | Reste net à toutes les échelles et peut embarquer une variante prefers-color-scheme pour les thèmes sombres | Firefox, Chrome et Safari récents y substituent le favicon bitmap quand il est déclaré |
Tailles selon les consignes favicon de Google et le comportement actuel des navigateurs, vérifiées en septembre 2026.
Décrivez le symbole, prévisualisez-le en taille d'onglet, puis exportez d'une passe les fichiers ICO, Apple touch, manifest et WEBP du tableau ci-dessus.
Ouvrir le générateur d'icônes de siteUn master, toutes les surfaces
Chaque surface du tableau lit un fichier différent depuis le même master. Les sites codés à la main les relient avec trois balises de head au plus : <link rel="icon">, <link rel="apple-touch-icon"> et un lien vers le manifest. Vous avez déjà un logo ? Le redimensionneur d'icônes d'app gratuit le découpe en jeu complet.
L'onglet de 16px
La surface la plus difficile qu'une icône de site remplisse. Le master de 1024px rétrécit 64 fois et les logos détaillés deviennent une bouillie. Les symboles qui survivent ont un sujet, deux couleurs au maximum, et des traits visibles quand la moitié des pixels a disparu.
Le filet favicon.ico
Un format de 1996 sur lequel une partie du web tourne encore. Les navigateurs qui ignorent chaque balise link et les crawlers qui ne lisent jamais votre head demandent quand même /favicon.ico à la racine. Un ICO multi-tailles là reste l'assurance compatibilité la moins chère.
La règle des 48px de Google
Les résultats mobiles affichent les favicons à côté des noms de site, mais seulement ceux qui passent les consignes : carré, côté multiple de 48px, déclaré sur la page d'accueil, explorable et représentatif de la marque. Les sites qui ne servaient que du 32px ont vu le leur disparaître.
Envois CMS, sans code
WordPress appelle favicon l'icône du site : chargez un carré de 512x512 dans Identité du site et il découpe toutes les tailles inférieures. Squarespace, Wix et Shopify gardent un champ favicon dans leurs réglages et acceptent l'export 512px tel quel.
Où une icône de site apparaît réellement
L'onglet du navigateur est l'endroit le plus évident, mais le même fichier voyage plus loin : barres de favoris et listes de lecture, pages d'historique, grille des sites les plus visités des nouveaux onglets, résultats mobiles de Google au-dessus de l'URL, raccourcis d'écran d'accueil iOS et Android, et sélecteur de tâches d'une PWA installée. Chaque surface recadre et réduit l'icône à sa façon ; voilà pourquoi le tableau ci-dessus existe. Un symbole qui tient à 16 px dans l'onglet tient partout. L'inverse est faux.
Trois façons d'obtenir une icône de site
Un générateur d'icônes de site et un convertisseur de favicons résolvent deux moitiés différentes du problème : le convertisseur réduit une image que vous avez déjà, le générateur IA crée d'abord l'image.
| Générateur IA | Convertisseur de favicons | Designer | |
|---|---|---|---|
| Point de départ | Un prompt texte ou une image de référence | Un logo carré déjà fini, à téléverser | Un brief, puis des tours de relecture |
| Ce que vous obtenez | Des symboles originaux générés pour le brief | Votre image existante découpée en fichiers favicon | Une image originale, ajustée à la main |
| Lisibilité à 16 px | On régénère jusqu'à ce que le symbole survive à la barre d'onglets | Aussi fort que le logo de départ | Solide, si le temps d'itération suit |
| Export complet | ICO multi-tailles, Apple touch, PNG manifest et WEBP depuis un master | C'est précisément tout ce que font la plupart des convertisseurs | Selon ce que prévoit le contrat |
| Délai | Moins d'une minute par concept | Quelques minutes | Des jours par tour |
| Coût | Crédits gratuits pour commencer, puis crédits par lot | Gratuit | Des centaines par projet |
Comparaison de flux de travail typiques, vérifiée en septembre 2026.
Ce que le générateur prend en charge
Tout ce que le générateur d'icônes de site prend en charge entre le premier prompt et les fichiers prêts pour un dépôt ou un champ de CMS.
Un master de 1024px
Générez une seule fois en haute résolution ; chaque taille de favicon s'en déduit en réduisant proprement, sans baver à 16 px.
Exports prêts pour favicon
ICO multi-tailles, icône Apple touch de 180px et PNG 192/512 du manifest, sans ouvrir un éditeur d'images.
PNG, ICO et WEBP
Livrez le format que chaque plateforme demande, y compris un WEBP moderne et léger.
Fond transparent ou uni
PNG transparents pour les sites à en-tête personnalisé, aplats unis qui tiennent face à n'importe quelle couleur d'onglet et thème sombre.
Variantes et historique
Régénérez des pistes sur le même concept et gardez chaque version jusqu'à la livraison du jeu.
Votre marque en référence
Téléversez un logo existant pour guider palette et langage de formes, afin que le favicon s'accorde au reste du système de marque.
Les styles d'icône de site qui survivent à 16 pixels
Le style décide de ce qui reste du design une fois réduit à la taille d'onglet ; essayez deux ou trois pistes dans le générateur d'icônes de site. Les symboles plats et minimalistes tiennent le mieux, car rien ne dépend de dégradés ou de lignes fines. Les presets glassy fonctionnent tant que la silhouette reste une seule masse épaisse. Les styles 3D brillent en tailles Apple touch et manifest et restent acceptables en onglet si le contour est net. Le pixel art transforme la contrainte du petit canevas en esthétique elle-même. Comparez-les à l'échelle d'icône dans la galerie de styles : les pages minimaliste, 3D et glassy montrent chaque style sur de vrais symboles.
Concevoir une icône de site qui survit à la barre d'onglets
Presque tous les problèmes de favicon naissent d'un design fait au mauvais zoom, et quatre habitudes les évitent presque tous. Composez autour d'un seul sujet : deux formes qui se disputent à 16 px ne font que du bruit. Limitez la palette à deux ou trois couleurs : l'anticrénelage efface les contrastes subtils plus vite que l'œil ne le croit. Testez en thème de navigateur clair et sombre : une barre d'onglets sombre avale les symboles sombres. Et renoncez aux mots : une lettre passe encore à 16 px, un mot jamais. Prévisualisez en taille d'onglet avant de trancher, pas après l'export.
Pour qui ce flux est fait
Un master issu du générateur d'icônes de site, exporté vers chaque surface qui affiche un petit carré à côté du nom de votre site.
Icônes de site WordPress
Chargez l'export 512x512 dans Identité du site ; les tailles inférieures et les balises link sont générées par WordPress.
Squarespace, Wix et Shopify
Chaque plateforme garde un champ favicon ou icône de navigateur dans ses réglages, et accepte l'export 512 px tel quel.
Sites codés à la main
Déposez les fichiers exportés à la racine, ajoutez une fois les balises link, et navigateurs, résultats de recherche et raccourcis sont couverts.
PWA et applications web
Les exports masquables 192 et 512 vont droit au web manifest pendant que le même master alimente l'icône d'onglet.
Studios et travail client
Gardez un historique par projet, régénérez le jeu entier à chaque rebranding et livrez des ensembles cohérents pour chaque site.
Projets perso et portefeuilles
Crédits gratuits pour commencer, un prompt pour un jeu de favicon complet, et l'icône d'onglet est en ligne le soir même.
Outils associés
Blog
Pour aller plus loin
Des lectures plus longues sur le design d'icônes, les tailles et les flux de travail.
FAQ icône de site
Tailles, formats, envois via CMS et les questions que les gens posent vraiment sur les favicons.
Quelle taille doit faire une icône de site ?
Concevez en 1024x1024 et exportez vers le bas : 16 et 32 px pour les onglets du navigateur, un carré multiple de 48 px pour les résultats Google, 180x180 pour l'icône Apple touch, et 192 plus 512 px pour le web manifest. Le générateur d'icônes de site exporte tout depuis le master de 1024, puisque chaque taille est une réduction propre.
Comment ajouter une icône de site à mon site web ?
Téléversez les fichiers à la racine du site et déclarez-les dans le head de la page d'accueil : une balise <link rel="icon"> vers l'ICO, le SVG ou le PNG, une <link rel="apple-touch-icon"> vers le fichier de 180 px, et un lien vers le manifest si vous livrez des tailles PWA. Sur WordPress, Squarespace, Wix ou Shopify, il suffit de charger l'icône dans les réglages du site ; la plateforme écrit toutes les balises pour vous.
Pourquoi mon favicon n'apparaît-il pas dans les résultats Google ?
Google n'affiche que les favicons conformes à ses consignes : fichier carré dont le côté est un multiple de 48 px, déclaré dans le head de la page d'accueil, hébergé sur une URL stable et explorable, non bloqué par robots.txt, et représentatif du site. Une icône de 32 px seulement échoue à la règle de taille. Après correction, il faut attendre le nouveau passage de Google, souvent quelques jours.
Icône de site, favicon ou icône d'app : quelle différence ?
Favicon et icône de site sont deux noms pour la même chose : le petit carré qui représente le site dans les onglets, les favoris et les résultats de recherche. Icône de site est simplement le terme WordPress. L'icône d'app est le visuel plus grand de l'écran d'accueil et des boutiques, avec ses propres règles ; c'est l'objet du guide de l'icône d'application mobile.
Un favicon peut-il avoir un fond transparent ?
Oui, et les exports PNG ou ICO transparents sont le choix par défaut des sites codés à la main. Vérifiez le symbole dans un thème sombre avant de publier : les symboles sombres disparaissent sur les onglets sombres. Pour l'icône Apple touch, livrez une image opaque ; iOS remplit la transparence en noir.
ICO, PNG ou SVG : quel format utiliser ?
Le jeu minimal actuel tient en trois fichiers : un ICO multi-tailles sous /favicon.ico en filet de sécurité, un SVG carré pour les navigateurs modernes, et un PNG de 180x180 pour les appareils Apple. Si le site s'installe en PWA, ajoutez des PNG de 192 et 512 px au web manifest. Au-delà, c'est de la redondance.
Comment changer l'icône du site dans WordPress ?
Allez dans Apparence → Personnaliser → Identité du site et chargez une image carrée d'au moins 512x512 px ; WordPress la recadre et génère toutes les tailles inférieures ainsi que les balises link. Générez le fichier 512 px dans l'outil ci-dessus, chargez-le, et l'icône d'onglet se mettra à jour une fois le cache vidé.
À qui appartiennent les icônes générées ?
À vous. Vous conservez tous les droits commerciaux sur chaque icône créée, dans le cadre des conditions d'utilisation, y compris les favicons publiés sur des sites clients et commerciaux.
Publiez une icône de site qui survit à la barre d'onglets
Décrivez le symbole une fois, laissez le générateur d'icônes de site exporter toutes les tailles d'une passe, et mettez le site à jour dans l'après-midi.