FaviconMaker
FaviconMaker.net

Générateur de manifeste web

Générez un site.webmanifest complet avec des entrées d'icônes, des couleurs de thème et des paramètres d'installation PWA. Copiez ou téléchargez en quelques secondes.

site.webmanifestCopier ou téléchargerCouleurs du thème

Paramètres du manifeste

Faites correspondre les chemins de fichiers que vous déployez réellement

Le manifeste fera référence à des icônes telles que /favicons/favicon-192.png.

Besoin des fichiers d'icônes réels ?Générer un pack favicon•Obtenez les bonnes balises head

site.webmanifest

Copiez ou téléchargez le JSON.

{
  "name": "My Website",
  "short_name": "My Website",
  "icons": [
    {
      "src": "/favicons/favicon-16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/favicons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0891B2",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "start_url": "/"
}

Extrait de tête

Collez ces balises dans votre <head>:

<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#0891B2" />

Vous préférez un extrait complet pour toutes les balises favicon ? Utiliser Balises HTML de favicon.

Foire aux questions

Est-ce que vous téléchargez quelque chose ?

Non. Cet outil génère du JSON dans votre navigateur ; il n'y a pas de téléchargements.

À quoi sert site.webmanifest ?

Il aide les navigateurs à installer votre site en tant que PWA et leur indique les icônes à utiliser.

Où pointent les chemins des icônes ?

Le manifeste fait référence à des fichiers d'icônes tels que favicon-192.png sous le chemin que vous avez choisi. Générez les fichiers avec Générateur de favicon.

Comment puis-je vérifier que cela fonctionne ?

Déployez le fichier, puis exécutez le Vérificateur de favicon pour confirmer que l'URL du manifeste est accessible.