Générateur de favicon gratuit

Source

Graisse

Style

Forme

Aperçu

16 px
32 px
48 px
180 px
192 px
512 px

Contient favicon.ico (16, 32 et 48 px), les PNG 16, 32, 180 (Apple), 192 et 512 (Android) et site.webmanifest.

Code à coller dans le <head> de votre site

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Déposez les fichiers du ZIP à la racine de votre site, puis collez ce code.

Tout est généré dans votre navigateur : votre logo n'est envoyé nulle part.

Comment utiliser ce calculateur ?

1. Choisissez une source : une ou deux lettres (ou un emoji), ou votre logo
2. Réglez la forme, les couleurs et la marge en regardant l'aperçu
3. Téléchargez le pack ZIP avec toutes les tailles
4. Déposez les fichiers à la racine du site et collez le code HTML dans le <head>

Réponse rapide

Quelles tailles de favicon faut-il prévoir ?

Prévoyez un favicon.ico contenant 16, 32 et 48 px pour les navigateurs, une icône Apple de 180 × 180 px pour l'iPhone et l'iPad, et des PNG de 192 et 512 px pour Android et les applications installables. Exemple : déposez le pack à la racine (votresite.fr/favicon.ico) et collez les 5 lignes de code dans le <head>.

FichierTailleUtilisé par
favicon.ico16, 32, 48 pxOnglets, favoris, Google
favicon-32x32.png32 pxNavigateurs récents
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png192 pxAndroid
android-chrome-512x512.png512 pxÉcran de démarrage, PWA

À propos de l'outil Générateur de favicon

Qu'est-ce que c'est ?

Le générateur de favicon crée la petite icône qui s'affiche dans l'onglet du navigateur, les favoris et sur l'écran d'accueil des téléphones. Partez d'une initiale, d'un sigle, d'un emoji ou de votre logo, réglez la forme et les couleurs, puis téléchargez un pack prêt à installer.

Pourquoi l'utiliser ?

Un site sans favicon affiche une icône générique : il paraît moins professionnel et se repère mal parmi des dizaines d'onglets. Google affiche aussi le favicon à côté de votre site dans les résultats de recherche sur mobile, ce qui aide à attirer l'œil et à inspirer confiance.

Comment ça marche ?

Chaque taille est dessinée directement à sa définition (16, 32, 48, 180, 192 et 512 px) pour rester nette, au lieu d'être réduite à partir d'une grande image. Le fichier favicon.ico regroupe les tailles 16, 32 et 48 px, avec des images PNG à l'intérieur, un format reconnu par tous les navigateurs. L'icône Apple est toujours un carré opaque, car iOS arrondit lui-même les coins. Tout est calculé dans votre navigateur.

Conseils d'utilisation

  • Restez simple : à 16 px, une ou deux lettres bien grasses se lisent bien mieux qu'un logo détaillé
  • Choisissez un fort contraste entre le texte et le fond pour que l'icône reste visible en mode clair comme en mode sombre
  • Pour un logo, partez d'une version carrée ou du seul symbole, sans le nom de la marque
  • Videz le cache ou testez en navigation privée si l'ancien favicon s'affiche encore après la mise en ligne
  • Google demande un favicon carré d'au moins 48 px, accessible à l'adresse indiquée dans le code HTML
Intégrer cet outil sur votre siteGratuitCopiez ce code dans votre site ou votre blog : l'outil s'affiche directement chez vous, gratuitement et sans inscription.Tous les outils à intégrer

Outils similaires