FaviconMaker
FaviconMaker.net

Generatore di web manifest

Genera un site.webmanifest completo con voci di icone, colori del tema e impostazioni di installazione PWA. Copia o scarica in pochi secondi.

site.webmanifestCopia o scaricaColori del tema

Impostazioni manifeste

Abbina i percorsi dei file effettivamente distribuiti

Il manifest farà riferimento a icone come /favicon/favicon-192.png.

Hai bisogno dei file delle icone effettivi?Genera un pacchetto favicon•Ottieni i tag head giusti

site.webmanifest

Copia o scarica il 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": "/"
}

Frammento di testa

Incolla questi tag nel tuo <head>:

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

Preferisci uno snippet completo per tutti i tag favicon? Utilizzo Tag HTML per favicon.

Domande frequenti

Carichi qualcosa?

No. Questo strumento genera JSON nel tuo browser; non ci sono caricamenti.

A cosa serve site.webmanifest?

Aiuta i browser a installare il tuo sito come PWA e indica loro quali icone utilizzare.

Dove puntano i percorsi delle icone?

Il manifest fa riferimento a file di icone come favicon-192.png sotto il percorso che hai scelto. Genera i file con Generatore di favicon.

Come verifico che funzioni?

Distribuisci il file, quindi esegui il file Verifica favicon per confermare che l'URL manifest sia raggiungibile.