Générateur de favicons : crée gratuitement un favicon en ligne

Un favicon est la petite icône d’un site web. Il apparaît dans l’onglet du navigateur, dans les favoris et comme icône d’application sur l’écran d’accueil des smartphones. Pour rester net partout, il doit exister en plusieurs tailles : le générateur crée des icônes de 16, 32 et 48 px dans favicon.ico, de 180 px pour iOS et de 192 et 512 px pour Android.

Le générateur de favicons est gratuit et ne nécessite aucun compte. Ton image n’est pas importée : la création se fait entièrement avec l’API Canvas dans ton navigateur. Rien n’est envoyé à un serveur ni enregistré. Une image peut peser jusqu’à 15 MB.

Tu obtiens favicon.ico avec les tailles 16, 32 et 48 px dans un seul fichier, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest. Tu peux télécharger chaque fichier séparément ou l’ensemble dans favicon-package.zip. Un extrait HTML de 6 lignes est aussi fourni pour le <head> de ta page : il intègre tous les fichiers et se termine par la couleur du thème, par exemple <meta name="theme-color" content="#18e888"> pour #18e888.

Il n’existe pas de taille unique : l’onglet du navigateur affiche 16 × 16 px, la barre des tâches Windows 32 × 32 px, et l’Explorateur et les raccourcis 48 × 48 px. iOS utilise 180 × 180 px pour l’écran d’accueil, Android 192 × 192 et 512 × 512 px. Le générateur crée toutes ces tailles à partir d’une image. Comme les détails fins et les longs textes deviennent illisibles à 16 × 16 px, l’aperçu te montre les tailles 16, 32 et 48 px à leur taille réelle et les grandes icônes en réduction avant que tu intègres les fichiers.

Importe l’image dans l’onglet « Importer une image ». Tu peux déplacer le cadrage par glisser-déposer, zoomer entre 50 et 250 % et faire rogner automatiquement les marges transparentes. Le générateur regroupe les tailles 16, 32 et 48 px dans un véritable favicon.ico multirésolution et crée les icônes PNG pour iOS et Android. L’idéal est de partir d’une image carrée d’au moins 512 × 512 px, car c’est la plus grande taille créée.

Oui. Dans l’onglet « Texte ou emoji », tu peux saisir jusqu’à 4 caractères ; 1 à 2 lettres ou un seul emoji donnent les meilleurs résultats. Tu choisis la couleur de fond, la couleur du texte, une forme arrondie, carrée ou circulaire, ainsi qu’une taille de texte entre 25 et 80 %. Tu obtiens les mêmes fichiers qu’avec une image importée.

Place favicon.ico, apple-touch-icon.png, les deux icônes Android Chrome et site.webmanifest à la racine de ton site web, car l’extrait HTML pointe vers des chemins comme /favicon.ico et /site.webmanifest. Copie ensuite l’extrait dans le <head> de tes pages. Si tu ne modifies pas toi-même le <head>, notamment dans WordPress, importe une icône de site dans ton CMS, par exemple android-chrome-512x512.png. L’outil ne se connecte pas directement à ton site web ni à ton CMS.

Elle remplit toujours le fond de l’icône Apple Touch, car iOS gère mal la transparence à cet endroit. Si « Fond transparent » est désactivé, elle remplit aussi favicon.ico et les icônes Android. Elle figure également comme theme_color et background_color dans site.webmanifest et comme balise méta theme-color dans l’extrait HTML.