Aller au contenu principal
Bethemesh
Images & graphisme

Générateur de favicon

Importez une image carrée : l’outil génère favicon.ico, les PNG de 16 à 512 px, l’icône Apple et les balises HTML à copier.

  • Presse-papiers
  • Export

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Vos fichiers sont traités localement dans votre navigateur et ne sont jamais envoyés sur nos serveurs.

Choisissez une image carrée de préférence, en PNG, JPEG ou WebP, jusqu’à 25 Mo.

Déposez votre fichier ici

Taille recommandée : 25 Mo maximum

Besoin de plus de possibilités ?

Retrouvez plusieurs outils dans un seul espace de travail, avec votre fichier et vos modifications en cours.

Ouvrir l’éditeur complet

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Le favicon est la petite icône affichée dans l’onglet du navigateur, les favoris, l’historique et l’écran d’accueil d’un téléphone. Chaque usage attend une taille précise, de 16 px dans un onglet à 512 px pour une application web installée. Ce générateur crée à partir d’une seule image le fichier favicon.ico, les PNG de 16 à 512 px et les balises HTML à coller dans le <head> de votre site.

Importez une image PNG, JPEG ou WebP de 25 Mo au plus, idéalement carrée et d’au moins 512 × 512 px. Cliquez sur Générer les favicons : l’image est d’abord convertie en PNG, puis réduite à six tailles carrées, 16, 32, 48, 180, 192 et 512 px.

Une image qui n’est pas carrée est réduite sans déformation et centrée ; les marges restent transparentes. Les fichiers portent les noms attendus par les navigateurs et les systèmes : favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png et android-chrome-512x512.png.

Le fichier favicon.ico réunit les versions 16, 32 et 48 px dans un seul conteneur ICO, lu par tous les navigateurs actuels et par Windows. Les balises HTML recommandées s’affichent avec un bouton Copier les balises, et Télécharger les fichiers enregistre les sept fichiers sur votre appareil.

Comment utiliser cet outil ?

  1. Importez le logo

    Choisissez une image carrée, de préférence un PNG avec fond transparent ou une couleur unie.

  2. Générez les favicons

    Cliquez sur Générer les favicons et vérifiez l’aperçu de chaque taille, surtout 16 et 32 px.

  3. Installez-les sur le site

    Téléchargez les fichiers, placez-les à la racine du site et collez les balises HTML dans le <head>.

Cas d'utilisation

Mettre en ligne un nouveau site

Produisez en une fois toutes les icônes d’un site vitrine à partir du logo.

Remplacer un favicon flou

Régénérez des tailles nettes à partir d’un logo en haute définition au lieu d’agrandir un ancien 16 px.

Préparer une application web

Obtenez les icônes 192 et 512 px à référencer dans le manifeste d’une PWA.

Exemples

Logo rectangulaire de 600 × 400 px

En 32 × 32 px, le logo est réduit d’un facteur 32 ÷ 600 ≈ 0,053 et mesure 32 × 21 px environ, centré avec une bande transparente d’un peu plus de 5 px en haut et en bas. Un logo carré occuperait toute la surface.

Entrée

logo.png de 600 × 400 px, fond transparent

Résultat

7 fichiers : favicon.ico (16, 32, 48 px) et 6 PNG carrés de 16 à 512 px

Balises HTML à coller

Les chemins commencent par / : si vous placez les fichiers dans un sous-dossier, modifiez les href en conséquence.

Entrée

Fichiers déposés à la racine du site

Résultat

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> puis les liens vers favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png et les deux icônes Android

Conseils et bonnes pratiques

  • Simplifiez le logo pour les petites tailles : à 16 px, un texte ou des détails fins deviennent illisibles ; préférez un symbole ou une initiale.
  • Pour l’icône Apple (180 px), utilisez une source avec un fond plein : iOS remplit la transparence et arrondit lui-même les coins.
  • Après la mise en ligne, videz le cache ou ouvrez une fenêtre privée : les navigateurs conservent longtemps l’ancien favicon.
  • Le navigateur peut demander l’autorisation de télécharger plusieurs fichiers à la fois ; acceptez-la pour récupérer les sept fichiers.

Sources et références

Questions fréquentes

Quelles tailles sont générées ?

16, 32 et 48 px pour les onglets et les raccourcis, 180 px pour l’écran d’accueil iOS, 192 et 512 px pour Android et les applications web installées, plus un favicon.ico regroupant 16, 32 et 48 px.

Ai-je encore besoin d’un favicon.ico ?

Il reste utile : certains navigateurs, lecteurs de flux et outils le demandent directement à l’adresse /favicon.ico, sans lire vos balises HTML.

Mon image n’est pas carrée, est-elle déformée ?

Non. Elle est réduite pour tenir entière dans le carré et centrée ; les zones vides restent transparentes. Recadrez-la d’abord si vous voulez remplir toute l’icône.

L’outil crée-t-il le fichier site.webmanifest ?

Non. Il fournit les icônes 192 et 512 px ; ajoutez-les dans le tableau icons du manifeste de votre application web.

Puis-je obtenir un favicon SVG ?

Non, l’outil produit des images matricielles PNG et ICO. Si votre logo existe en SVG, vous pouvez le déclarer en plus avec <link rel="icon" type="image/svg+xml">.

Mon logo est-il envoyé sur un serveur ?

Non. La conversion, les redimensionnements et la création du fichier ICO se font dans votre navigateur.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Image ronde et coins arrondis

Découpez une photo en cercle, arrondissez ses coins et ajoutez une bordure, avec un fond transparent.

Images & graphismeNouveauUtiliser l’outil

Recadrer une image

Tracez un cadre sur l’image, imposez un ratio (1:1, 4:5, 16:9…) et téléchargez la partie recadrée.

Images & graphismeMis en avantUtiliser l’outil

À lire aussi

GuideFormatsDébutant

PNG, JPEG, WebP ou AVIF : quel format choisir ?

Choisissez le bon format d’image pour une photo, une capture, un visuel transparent ou une interface, sans sacrifier inutilement la qualité ni les performances.

31 août 202627 min
TutorielBonnes pratiquesDébutant

Optimiser ses images pour le Web sans perdre en qualité

Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.

30 août 20265 min