Generador de favicons — ICO, Apple Touch, Web Manifest, PWA

Convierte una imagen PNG, JPEG o WebP en el conjunto completo de favicons modernos: un favicon.ico multi-marco real, los PNG estándar, un apple-touch-icon opaco, site.webmanifest y browserconfig.xml, generado en tu navegador.

Sube una imagen de origen

Haz clic o arrastra un PNG, JPEG o WebP

PNG, JPEG y WebP de hasta 15 MB: el formato se verifica por los bytes, no por la extensión

Tu imagen se decodifica y redimensiona en local. No se sube nada.

Una imagen, todos los tamaños de favicon

Los navegadores, iOS, Android y Windows buscan cada uno un archivo de favicon distinto. En lugar de exportar cinco archivos a mano, esta herramienta genera todos los tamaños desde una sola imagen: un favicon.ico de varios marcos (16/32/48 px), los PNG de 16 y 32 px, el apple-touch-icon de 180 px, los iconos de Android Chrome de 192 y 512 px y el azulejo de Windows de 150 px.

El .ico es un contenedor ICONDIR real con marcos PNG dentro, no un PNG renombrado. El paquete también incluye site.webmanifest y browserconfig.xml, y el README contiene el fragmento <head> de HTML exacto para copiar.

Cómo generar un conjunto de favicons

1
Arrastra una imagen PNG, JPEG o WebP. El formato se comprueba por los bytes mágicos, no por la extensión.
2
Define el nombre del sitio y el color del tema, y elige cómo encaja la imagen en un cuadrado (contener, cubrir o estirar) y el fondo.
3
Pulsa «Generar conjunto de favicons»: cada PNG y el .ico se renderizan a su resolución nativa.
4
Descarga el ZIP, copia los archivos a la raíz de tu web y pega el fragmento <head> del README en tu página.

Qué contiene el paquete

Estos archivos se generan en cada ejecución. favicon.ico se verifica releyendo el contenedor y el tamaño en píxeles de cada marco antes de ofrecer la descarga.

Archivo	Usado por
favicon.ico	Navegadores antiguos y pestañas: ICO de varios marcos (16/32/48 px).
favicon-16x16.png / favicon-32x32.png	Navegadores modernos con las etiquetas <link> de PNG.
apple-touch-icon.png	Pantalla de inicio de iOS Safari (debe ser opaco).
android-chrome-192x192.png / 512x512.png	Pantalla de inicio de Android Chrome y aviso de instalación PWA.
mstile-150x150.png	Azulejos fijados del menú Inicio / barra de tareas de Windows.
site.webmanifest	Manifest PWA que referencia los iconos de 192 y 512 px.
browserconfig.xml	Color de fondo del azulejo de Windows.
README.txt	Pasos de instalación y fragmento <head> de HTML.

Cómo instalarlo

Copia los archivos a la raíz de tu sitio web y añade estas etiquetas al <head> de cada página:

  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <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="msapplication-TileColor" content="#FFFFFF">
  <meta name="theme-color" content="#FFFFFF">

Los valores theme-color y msapplication-TileColor coinciden con el color elegido. Los archivos conservan sus nombres estándar, así que no se necesita configuración adicional.

Por qué apple-touch-icon.png es opaco

iOS ignora el canal alfa de los iconos de la pantalla de inicio y lo sustituye por negro, lo que se ve mal. Esta herramienta renderiza por tanto apple-touch-icon.png sobre un fondo opaco (blanco por defecto o tu color personalizado), mientras que el resto de PNG conservan la transparencia elegida.

Aunque tu imagen ya tenga fondo sólido, el ajuste transparente sigue produciendo un apple icon opaco, porque solo ese archivo se fuerza a ser opaco.

Privacidad

La imagen se decodifica con createImageBitmap y se renderiza con Canvas en el navegador. No hay subida, ni conversión en servidor, ni cuentas. El ZIP se monta en memoria con JSZip.

Herramientas relacionadas

Preguntas frecuentes

¿favicon.ico es un archivo ICO real?

Sí. Es un contenedor ICONDIR con marcos PNG de 16, 32 y 48 px. La herramienta vuelve a leer el archivo tras codificarlo para confirmar la estructura del contenedor y el tamaño en píxeles de cada marco.

¿Se sube mi imagen?

No. La decodificación, el redimensionado, la codificación y la creación del ZIP ocurren en tu navegador.

¿Por qué apple-touch-icon.png no es transparente?

iOS sustituye el canal alfa de los iconos de la pantalla de inicio por negro. Para evitarlo, el apple icon de 180 px se renderiza sobre un fondo opaco (blanco por defecto o el color elegido).

¿Qué archivos necesito de verdad?

Como mínimo favicon.ico y favicon-32x32.png cubren todos los navegadores modernos. Añade apple-touch-icon.png para iOS, los iconos de 192/512 px y site.webmanifest para Android/PWA, y mstile-150x150.png para los azulejos de Windows. El README explica cada uno.

¿Genera safari-pinned-tab.svg?

No: ese archivo es un vector monocromo que no puede derivarse de una imagen de mapa de bits. Proporciónalo desde tu arte vectorial si quieres el soporte de pestaña fijada de Safari; el README lo indica.

¿Qué pasa si cambio los ajustes tras generar?

El resultado anterior se invalida y se genera un conjunto nuevo desde tu imagen con el nuevo ajuste, fondo o color, de modo que la descarga siempre coincide con los ajustes mostrados.

¿Encontraste un problema con esta herramienta?

Informar de un problema