Skip to content
user@convertitive:~$convertitive

Generador de Favicon

Entra una imagen cuadrada, sale un juego completo de favicons. Nada abandona su navegador.

Una configuración moderna de favicon en 2026 es un pequeño paquete, no un archivo único: un favicon.ico clásico para agentes de usuario antiguos y marcadores viejos, iconos PNG de 16 y 32 píxeles para las pestañas del navegador, un apple-touch-icon de 180 px para las pantallas de inicio de iOS, y PNG de 192/512 px para el manifiesto de aplicación web. La parte del .ico es menos dolorosa de lo que parece: desde Windows Vista, las entradas del directorio ICO pueden contener imágenes codificadas en PNG directamente, así que esta herramienta renderiza su imagen a cada tamaño en un canvas, codifica cada una como PNG y envuelve el trío de 16/32/48 en un contenedor ICO que solo cuesta una cabecera de 6 bytes más 16 bytes de directorio por imagen — todo del lado del cliente, sin subir nada a ninguna parte.

Drop one image here (PNG, SVG, JPEG, WebP…), or

One file, up to 16 MB. A square 512×512+ source works best. Stays in your browser — nothing is uploaded.

How to use

  1. Suelte una imagen

    Arrastre cualquier imagen que su navegador pueda decodificar — PNG, SVG, JPEG, WebP — sobre la zona de arrastre. Una fuente cuadrada de al menos 512×512 da los resultados más nítidos; las imágenes no cuadradas se recortan automáticamente por el centro.

  2. Revise las vistas previas en tamaño pequeño

    La herramienta renderiza su icono a 16, 32 y 48 píxeles sobre un fondo ajedrezado claro y otro oscuro — exactamente los tamaños que usan las pestañas del navegador. Si el diseño se vuelve ilegible a 16 px, simplifíquelo antes de publicarlo.

  3. Descargue el juego

    Obtenga favicon.ico (que agrupa entradas PNG de 16, 32 y 48 px en un solo archivo) más los PNG individuales: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png a 180 px, e icon-192/icon-512 para su manifiesto.

  4. Copie las etiquetas del head

    Copie el fragmento <link> ya preparado en el head de su HTML, coloque los archivos en la raíz de su sitio y referencie icon-192.png e icon-512.png desde el array icons del manifiesto de su aplicación web.

Frequently asked questions

¿Se sube mi imagen a un servidor?
No. La decodificación, el recorte centrado, el escalado, la codificación PNG y el ensamblado del contenedor ICO se ejecutan en su navegador con la API Canvas y JavaScript puro. No hay ninguna petición de subida en ningún momento — Convertitive nunca ve su imagen.
¿Qué tamaños importan realmente, y por qué estos?
16×16 y 32×32 cubren pestañas del navegador, barras de marcadores y listas de historial en pantallas estándar y de alta densidad. 48×48 cubre los accesos directos de sitios en Windows y algunos contextos de escritorio. 180×180 es lo que los iPhone e iPad actuales solicitan para los iconos de pantalla de inicio. 192×192 y 512×512 son los dos tamaños que esperan la especificación del manifiesto de aplicación web y el aviso de instalación de Android. Todo lo demás que los navegadores necesitan lo escalan a partir de uno de estos.
¿Todavía necesito un archivo .ico en 2026?
Sí, como red de seguridad. Los navegadores y rastreadores anteriores al soporte de favicons PNG, los marcadores antiguos que codificaron /favicon.ico de forma fija, y una larga cola de lectores de feeds, generadores de vistas previas de enlaces y bots de monitorización siguen solicitando /favicon.ico en la raíz del sitio de manera incondicional. Servir un archivo real ahí no cuesta nada y evita un flujo constante de errores 404 en sus registros.
¿Se conservan los fondos transparentes?
Sí. Cada salida está codificada en PNG — incluidas las entradas dentro del contenedor .ico — y PNG lleva un canal alfa completo. Las vistas previas ajedrezadas de arriba existen precisamente para que compruebe cómo se ve su icono transparente sobre los temas claro y oscuro del navegador antes de comprometerse con él.
¿Por qué el icono táctil de Apple mide 180 píxeles?
180×180 es el tamaño que iOS solicita para los iconos de pantalla de inicio en pantallas Retina 3x (60 pt × 3). Los dispositivos más antiguos que quieren 152 o 167 píxeles simplemente reducen el archivo de 180 px, así que entregar el tamaño más grande cubre toda la gama de Apple. Tenga en cuenta que iOS aplica su propia máscara de esquinas redondeadas, así que proporcione un cuadrado a sangre completa — sin esquinas prerredondeadas.
¿Y los favicons SVG?
Los navegadores de escritorio modernos aceptan <link rel=“icon” type=“image/svg+xml”> y es una gran adición — un archivo nítido a cualquier tamaño, que incluso puede adaptarse al modo oscuro con CSS incrustado. Pero el soporte de Safari históricamente ha ido por detrás y muchos agentes que no son navegadores lo ignoran, así que el juego de PNG más ICO sigue siendo la base segura. Incluya el SVG como un <link> adicional, no como sustituto.

About

El contenedor ICO, y por qué funcionan las entradas PNG

Un archivo .ico es uno de los formatos contenedores más simples que siguen en uso diario: una cabecera ICONDIR de 6 bytes (palabra reservada, tipo 1 para iconos, número de entradas), luego un ICONDIRENTRY de 16 bytes por imagen que registra su ancho y alto (como bytes individuales, donde 0 significa 256), profundidad de bits, longitud en bytes y desplazamiento, seguido de los datos de imagen en bruto uno tras otro. Originalmente esos datos tenían que ser un BMP sin cabecera con una máscara de transparencia AND; desde Windows Vista, los datos pueden ser en cambio un flujo PNG completo, que el sistema operativo detecta por sus bytes de firma. Ese único cambio es lo que hace posible un generador del lado del cliente tan pequeño — el propio codificador PNG de canvas.toBlob del navegador hace el trabajo de píxeles, y la capa ICO es solo 6 + 16×n bytes de contabilidad little-endian escrita con un DataView.

Cómo eligen los navegadores la fuente del favicon

Cuando se declaran varios enlaces de icono, los navegadores eligen por el tipo rel y el atributo sizes: una pestaña en una pantalla 2x quiere 32 px, así que un <link rel=“icon” sizes=“32x32”> gana sobre uno de 16 px; si nada de lo declarado coincide, la mayoría de los navegadores recurren a solicitar /favicon.ico desde la raíz del sitio incluso sin ninguna etiqueta link presente. Los dispositivos Apple ignoran por completo rel=“icon” para los iconos de pantalla de inicio y buscan rel=“apple-touch-icon” (recurriendo a /apple-touch-icon.png en la raíz). Las aplicaciones web instalables no leen ninguno de los dos — toman las entradas de 192 y 512 px del array icons del manifiesto. Esa división — etiquetas link para pestañas, apple-touch-icon para iOS, manifiesto para instalaciones — es la razón de que un juego completo tenga tres mecanismos de entrega en lugar de uno.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.