FaviconMaker
FaviconMaker.net

Generador de manifiesto web

Genere un site.webmanifest completo con entradas de íconos, colores de tema y configuraciones de instalación de PWA. Copie o descargue en segundos.

site.webmanifestCopiar o descargarColores del tema

Configuraciones de manifiesto

Haga coincidir las rutas de archivos que realmente implementa

El manifiesto hará referencia a iconos como /favicons/favicon-192.png.

¿Necesita los archivos de iconos reales?Generar un paquete favicon•Obtenga las etiquetas de cabeza adecuadas

site.webmanifest

Copie o descargue el 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": "/"
}

fragmento de cabeza

Pega estas etiquetas en tu <head>:

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

¿Prefieres un fragmento completo de todas las etiquetas favicon? Usar Etiquetas HTML de favicon.

Preguntas frecuentes

¿Subes algo?

No. Esta herramienta genera JSON en su navegador; no hay cargas.

¿Para qué sirve site.webmanifest?

Ayuda a los navegadores a instalar su sitio como PWA y les indica qué íconos usar.

¿Adónde apuntan las rutas de los iconos?

El manifiesto hace referencia a archivos de iconos como favicon-192.png bajo el camino elegido. Generar los archivos con Generador de favicon.

¿Cómo verifico que funciona?

Implemente el archivo y luego ejecute el Verificador de favicon para confirmar que se puede acceder a la URL del manifiesto.