Generador de Recursos Favicon

Genera un paquete completo de favicons — ICO, PNG, icono Apple touch, iconos PWA, manifiesto web y el fragmento HTML — localmente en tu navegador.

Imagen de origen
Suelta o elige un PNG, JPEG, WebP o SVG. Todas las plataformas usan esta imagen a menos que la sustituyas a continuación.
Información del sitio
Utilizada por el manifiesto, el apple-touch-icon y el fragmento HTML.

Se muestra cuando el nombre de la aplicación es demasiado largo para el espacio.

Opcional. Se omite del manifiesto si está vacío.

Dónde se abre la PWA instalada.

Prefijo aplicado a cada href en el fragmento HTML y a cada src en el array icons del manifiesto.

Controla el theme_color del manifiesto y la etiqueta HTML <meta name="theme-color">.

background_color del manifiesto. Lo usan los navegadores para pintar las pantallas de inicio de las PWA.

Favicon para navegador de escritorio
Controla favicon.ico, favicon-16x16.png, favicon-32x32.png y (cuando el origen es SVG) favicon.svg.

Espacio visual de respiración alrededor del origen dentro del icono.

Pestaña de navegador de escritorio
Pestaña de navegador de escritorio (dark)
Resultado de motor de búsqueda
Clip web de iOS
Controla el apple-touch-icon.png de 180×180 utilizado en las pantallas de inicio de iOS.

Los iconos de Apple deben ser opacos, por lo que este relleno siempre se aplica.

Espacio visual de respiración alrededor del origen dentro del icono.

Pantalla de inicio de iOS
Iconos PWA
Controla pwa-192x192.png, pwa-512x512.png y las variantes maskable.

Espacio visual de respiración alrededor del origen dentro del icono.

El área segura recomendada por el W3C es del 40%. El contenido de origen permanece visible dentro de cualquier máscara de plataforma.

Barra de tareas de Windows
Lanzador de Android
Paquete generado
Haz clic en Generar para renderizar todos los recursos, crear el zip y copiar el fragmento HTML.
Aún no hay paquete
Elige una imagen y haz clic en Generar para ensamblar el paquete de favicons.

Qué genera la herramienta

Este generador convierte una sola imagen en un paquete de favicons moderno y completo: un .ico multitamaño para navegadores antiguos, las variantes PNG de 16 / 32 / 180 / 192 / 512, un .svg original opcional, un site.webmanifest para PWA y el fragmento HTML que pegas en <head>. Cada byte se produce en tu navegador; sin subidas, sin servidor, sin analítica.

Qué incluye el paquete

  • favicon.ico — multiimagen (16 / 32 / 48) para pestañas del navegador, marcadores y accesos directos antiguos de Windows.
  • favicon-16x16.png y favicon-32x32.png — variantes PNG modernas que usan los navegadores actuales.
  • favicon.svg — se incluye únicamente cuando tu imagen de origen es SVG y el interruptor “Usar SVG original” está activado.
  • apple-touch-icon.png — 180×180, opaco, usado por las pantallas de inicio de iOS.
  • pwa-192x192.png y pwa-512x512.png — los iconos PWA estándar.
  • pwa-maskable-192x192.png y pwa-maskable-512x512.png — variantes enmascarables con el área segura recomendada por la W3C.
  • site.webmanifest — el manifiesto PWA conectado a los iconos anteriores.

Cómo funcionan el relleno, el fondo y las zonas seguras enmascarables

Cada plataforma tiene su propio relleno (“Margen”) para que puedas dejar espacio dentro del lienzo del icono. El interruptor “Añadir fondo” pinta un cuadrado opaco detrás de tu origen, útil cuando el origen es transparente y el destino requiere opacidad (la pantalla de inicio de Apple) o simplemente para contraste visual en una pestaña del navegador. Los iconos PWA enmascarables usan una zona segura adicional sobre el margen de la plataforma: cualquier cosa fuera del ~80% central puede ser recortada por Android, Windows o ChromeOS cuando apliquen una máscara circular, redondeada o tipo squircle.

Cómo integrar el paquete en tu sitio

  1. Descomprime el archivo descargado en la raíz de tu sitio (de modo que los archivos queden en /favicon.ico, /site.webmanifest, etc.).
  2. Pega el fragmento HTML en el <head> de tu sitio.
  3. Si sirves los recursos desde una subruta (por ejemplo /static/icons/), configura “Ruta de los recursos” antes de generar para que el fragmento y el manifiesto usen las URL correctas.
  4. Si personalizaste el manifiesto más allá de lo que esta herramienta expone (por ejemplo, para añadir categories o screenshots), abre site.webmanifest en un editor de texto y modifícalo directamente: es JSON plano.