Aller au contenu
MagicWebBox
Connexion

Générateur de favicons

Toutes les icônes d'un site

Source

Options

Sur iPhone, les zones transparentes de l'icône d'écran d'accueil s'affichent en noir : choisissez un fond pour une image transparente.

Manifeste web

Aperçu et fichiers

Les icônes sont dessinées dans votre navigateur : l'image n'est envoyée nulle part.

Code HTML

À coller dans le <head> de vos pages, avec les fichiers du ZIP à la racine du site.

<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="#b91c1c">

site.webmanifest

{
  "name": "Mon site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#b91c1c",
  "background_color": "#ffffff",
  "display": "standalone"
}

À propos de l'outil

Ce générateur produit les icônes dont un site a besoin à partir d'une seule source. Vous partez soit d'une image PNG, JPEG, SVG ou WebP de 20 Mo au maximum, soit d'une ou deux lettres posées sur un carré coloré aux coins arrondis réglables. Une marge intérieure et un fond transparent ou coloré s'appliquent à toutes les tailles.

Vous obtenez un favicon.ico contenant les tailles 16, 32 et 48 px, les PNG 16 et 32 px, l'apple-touch-icon de 180 px, les icônes Android de 192 et 512 px, ainsi qu'un fichier site.webmanifest avec le nom du site et ses couleurs. L'aperçu montre l'icône dans un onglet clair et sombre et sur un écran d'accueil de téléphone, et le code HTML des balises link est prêt à copier.

Comment l'utiliser

  1. Dans « Source », choisissez « Lettres » et réglez couleurs et arrondi, ou « Image importée » puis « Choisir une image (PNG, JPEG, SVG, WebP) ».
  2. Dans « Options », ajustez la « Marge intérieure » et décochez « Fond transparent » si vous voulez une « Couleur de fond ».
  3. Remplissez le « Manifeste web » : « Nom du site », « Nom court », « Couleur du thème » et « Couleur de fond de l'application ».
  4. Vérifiez l'« Aperçu et fichiers », puis cliquez sur « Tout télécharger (ZIP) ».
  5. Cliquez sur « Copier le HTML » et collez les balises dans le head de vos pages.

Questions fréquentes

Quels fichiers contient le ZIP ?

favicon.ico (16, 32 et 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png en 180 px, android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest. Placez-les à la racine du site : le code HTML généré pointe vers ces chemins.

Mon image est-elle envoyée à un serveur ?

Non. Les icônes sont dessinées sur un canvas dans votre navigateur, le fichier ICO et le ZIP sont assemblés sur place. L'image importée n'est envoyée nulle part et n'est pas non plus mémorisée d'une visite à l'autre.

Pourquoi mon icône apparaît-elle sur fond noir sur iPhone ?

iOS affiche en noir les zones transparentes de l'icône d'écran d'accueil. Si votre image est transparente, décochez « Fond transparent » et choisissez une couleur de fond : elle sera appliquée à toutes les tailles générées.

Quelle image de départ donne le meilleur résultat ?

Une image carrée d'au moins 512 px, ou un SVG, car la plus grande icône produite fait 512 px. Une image rectangulaire est centrée sans être déformée. Les détails fins disparaissent en 16 px : un logo simple ou des initiales restent lisibles.