TF

Design et CSS

Générateur de favicon

Créez un favicon à partir d’un texte, d’un emoji ou d’une image et téléchargez favicon.ico, icônes PNG, apple-touch-icon et manifest.

180×180
48×48
32×32
16×16
My App

Le ZIP contient favicon.ico (16, 32, 48 px), des icônes PNG jusqu’à 512 px, apple-touch-icon.png, site.webmanifest et les balises HTML ci-dessous.

À ajouter dans votre <head>
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<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" />
<meta name="theme-color" content="#0f766e" />

À quoi sert cet outil ?

Le favicon est la petite icône des onglets, favoris et écrans d’accueil. Tapez des initiales ou un emoji, ou importez un logo, choisissez couleurs et forme, et prévisualisez-le aux vraies tailles. Téléchargez un ZIP prêt à l’emploi avec tous les fichiers attendus par les navigateurs et téléphones modernes, plus le HTML à ajouter à votre page.

Le ZIP contient favicon.ico avec des images de 16, 32 et 48 px, des icônes PNG, un apple-touch-icon de 180 px pour l’écran d’accueil iPhone et iPad, des icônes de 192 et 512 px pour Android et les PWA, et un site.webmanifest qui les référence.

Les petites tailles sont rendues séparément au lieu d’être simplement réduites, pour que les lettres restent nettes. Tout est dessiné sur un canvas dans votre navigateur — les images importées ne sont envoyées nulle part.

Comment utiliser l’outil Générateur de favicon

  1. Choisissez Texte ou emoji et tapez jusqu’à quatre caractères, ou choisissez Image et importez un logo.
  2. Choisissez une couleur de fond, une forme (carré, arrondi ou cercle) et la taille du contenu — ou un fond transparent.
  3. Vérifiez les aperçus à 16, 32, 48 et 180 pixels, y compris la maquette d’onglet de navigateur.
  4. Téléchargez le ZIP (ou seulement favicon.ico) et collez les balises HTML dans le <head> de votre page.

Exemples

Balises HTML

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Questions fréquentes

Quelles tailles de favicon me faut-il ?

Un favicon.ico avec des images de 16, 32 et 48 px couvre les navigateurs de bureau. Ajoutez un apple-touch-icon de 180 px pour iOS et des PNG de 192 et 512 px dans un manifest pour Android et les applis web installables. Le ZIP contient tout.

Où placer les fichiers ?

Envoyez-les à la racine de votre site (le même dossier que la page d’accueil) et collez les balises HTML dans le <head> de chaque page.

Puis-je utiliser un emoji comme favicon ?

Oui. Tapez un emoji dans le champ texte. Il est dessiné avec la police emoji de votre appareil et paraît identique partout une fois enregistré en image.

Pourquoi mon nouveau favicon n’apparaît-il pas ?

Les navigateurs mettent les favicons fortement en cache. Forcez le rechargement, ouvrez la page en navigation privée ou videz le cache.

Besoin de plus de puissance plus tard ?

Des outils premium, des limites plus élevées et un accès API sont prévus. La V1 reste gratuite et privée dans votre navigateur.