Un logo terminado acaba encontrándose con un desarrollador que pide el favicon y los iconos de app. La lista llegaba antes a veinte archivos. Hoy es mucho más corta, pero los tamaños que quedan son precisos, dos de ellos necesitan el arte preparado de otra manera, y hay un formato de archivo que Illustrator no puede escribir en absoluto. Este artículo da los tamaños que importan en 2026, cómo preparar un símbolo para que sobreviva a 16 píxeles, cómo exportar cada tamaño con Exportar para pantallas, cómo construir el .ico y las etiquetas que entregar junto con los archivos.
Los tamaños que importan en 2026
Los navegadores y los sistemas operativos han convergido en un conjunto pequeño.
favicon.ico sigue importando. Es un solo archivo que contiene tres mapas de bits, 16, 32 y 48 px, y es el respaldo que todos los navegadores entienden. Los navegadores piden /favicon.ico en la raíz del sitio incluso cuando ninguna etiqueta apunta a él.
Un favicon SVG es el icono de pestaña moderno. Escala a cualquier tamaño, pesa unos cientos de bytes y puede llevar una media query para cambiar de color en modo oscuro. Los navegadores Chromium y Firefox lo usan desde hace años; Safari se sumó con la versión 26 en 2025, así que las versiones anteriores de Safari siguen recurriendo al ICO.
Un PNG de 32 px cubre los navegadores que no aceptan ninguno de los dos anteriores y no cuesta nada incluirlo.
apple-touch-icon.png en 180 x 180 es lo que iOS y iPadOS colocan en la pantalla de inicio y en los marcadores de Safari. Un solo tamaño basta; el antiguo conjunto de 57 a 152 px es heredado.
Los PNG de 192 y 512 px se declaran en el manifiesto de la aplicación web. Android y Chrome usan el 192 para la pantalla de inicio y el 512 para el aviso de instalación y la pantalla de bienvenida.
Un PNG maskable de 512 px es el mismo icono preparado a sangre completa, para los lanzadores que recortan los iconos en un círculo, un squircle o un cuadrado redondeado.
Los mosaicos de Windows, el archivo browserconfig.xml y las etiquetas meta msapplication son heredados: el Edge actual usa el favicon estándar. El mask-icon monocromo de Safari para pestañas fijadas es opcional y hoy se pide rara vez.
| Archivo | Tamaño (px) | Formato | Usado por |
|---|---|---|---|
| favicon.ico | 16, 32, 48 en un solo archivo | ICO | Pestañas, marcadores, navegadores antiguos, accesos directos de Windows |
| icon.svg | Cualquiera, viewBox cuadrado | SVG | Pestañas en navegadores actuales, compatible con modo oscuro |
| favicon-32.png | 32 x 32 | PNG | Respaldo de pestaña donde el SVG no se lee |
| apple-touch-icon.png | 180 x 180 | PNG, opaco | Pantalla de inicio de iOS y iPadOS, marcadores de Safari |
| icon-192.png | 192 x 192 | PNG | Pantalla de inicio de Android, instalación de PWA |
| icon-512.png | 512 x 512 | PNG | Pantalla de bienvenida y aviso de instalación de PWA |
| icon-maskable-512.png | 512 x 512 | PNG, a sangre completa | Iconos adaptativos de Android, recortados a una forma |
Prepara el arte
Empieza desde un documento cuadrado, basado en píxeles
Crea un documento nuevo con el perfil Web, o configúralo tú mismo: color RGB, píxeles como unidad, 72 ppi para los efectos de rasterizado. Añade una mesa de trabajo de 512 x 512 px llamada icon y, si el símbolo tiene detalles finos, una segunda mesa de trabajo de 16 x 16 px para una versión pequeña ajustada a mano. Selecciona la herramienta Mesa de trabajo (Shift+O) y comprueba en el panel Propiedades que X, Y, An y Al son números enteros. Una mesa de trabajo a medio píxel produce un borde suave en cada exportación.
Simplifica el símbolo
Un favicon es el logomark, nunca el logo completo. Quita el logotipo, engrosa los trazos finos, abre los contrapunzones pequeños, elimina cualquier detalle que desaparezca a 16 px. Un icono de 16 px tiene 256 píxeles para trabajar. Compruébalo con Ver > Previsualización de píxeles (Cmd+Opt+Y, Ctrl+Alt+Y en Windows) al 800 por ciento, que muestra el resultado rasterizado en lugar del vector.
Respeta el área segura de los iconos maskable
Para el 512 maskable, rellena toda la mesa de trabajo con el color de fondo, porque el lanzador decide la forma exterior y cualquier esquina transparente se vería como un agujero. Mantén el símbolo dentro de un círculo centrado cuyo radio sea el 40 por ciento del ancho del icono: para 512 px, un círculo de unos 410 px de diámetro. El diez por ciento exterior de cada lado puede recortarse. Dibuja ese círculo con la herramienta Elipse (L), céntralo en la mesa de trabajo con Ventana > Alinear ajustado a Alinear con mesa de trabajo, y luego conviértelo en guía con Ver > Guías > Crear guías (Cmd+5, Ctrl+5 en Windows). Mantén el icono maskable en su propia mesa de trabajo en lugar de reutilizar la transparente, porque el margen es diferente.
Para el apple-touch-icon, usa un fondo opaco y esquinas rectas. iOS aplica la máscara redondeada por su cuenta y no respeta la transparencia, así que un icono ya redondeado o transparente sale con las esquinas oscuras.
Ajusta a la cuadrícula de píxeles
Activa Ver > Ajustar a píxel antes de dibujar, para que los bordes rectos caigan en píxeles enteros. Para un arte ya existente, selecciónalo y elige Objeto > Make Pixel Perfect, o marca Alinear con cuadrícula de píxeles en el panel Transformar. Las curvas no pueden ser perfectas al píxel, pero los bordes exteriores de un símbolo sí, y ahí es donde se nota el desenfoque.
Exporta con Exportar para pantallas
Archivo > Exportar > Exportar para pantallas (Cmd+Opt+E, Ctrl+Alt+E en Windows) exporta mesas de trabajo a varios tamaños y formatos en una sola ejecución.
- En la pestaña Mesas de trabajo, selecciona la mesa de trabajo icon, o un rango.
- Apunta el campo Exportar a hacia tu carpeta de entrega y desmarca Crear subcarpetas, o los archivos acabarán en una carpeta por escala.
- En Formatos, ajusta la primera fila a PNG con Escala en Anchura, 32 px, y el sufijo -32. Haz clic en Añadir escala para cada tamaño adicional: Anchura 180 con el sufijo -180, Anchura 192 con -192, y 1x con -512 para el archivo maestro. Añade una última fila con Formato ajustado a SVG a 1x.
- Haz clic en el icono del engranaje. En PNG, ajusta Suavizado a Optimizado para ilustraciones (supermuestreo). En SVG, marca la opción Minify.
- Haz clic en Exportar mesa de trabajo.
Renombra icon-180.png a apple-touch-icon.png e icon-32.png a favicon-32.png, o llama apple-touch-icon a una mesa de trabajo duplicada y expórtala a Anchura 180 para que el nombre de archivo sea el correcto desde el principio. Haz lo mismo con la mesa de trabajo llamada icon-maskable, exportada a 1x y a Anchura 192.
El desplegable Escala acepta Anchura, Altura o Resolución además de multiplicadores, y el sufijo se añade al nombre de la mesa de trabajo, así que una sola mesa de trabajo de 512 produce todos los tamaños de PNG en una pasada. Si el símbolo sigue viéndose turbio a 16 o 32, exporta esos dos desde la mesa de trabajo ajustada a mano.
El panel Exportación de recursos
Ventana > Exportación de recursos hace el mismo trabajo para objetos en lugar de mesas de trabajo. Arrastra el símbolo al panel (arrastra con Option, o con Alt en Windows, para reunir varios objetos como un solo recurso), añade las mismas filas de escala y sufijo, y haz clic en Exportar. Sirve para un símbolo que vive dentro de un documento más grande, pero la exportación usa los límites propios del recurso, así que un símbolo que no es cuadrado produce un archivo que no es cuadrado. Las mesas de trabajo te dan el lienzo cuadrado y el margen, y por eso son la mejor vía para los iconos.
Crea el archivo .ico que Illustrator no puede exportar
Illustrator no puede escribir archivos ICO, y Exportar para pantallas tampoco. Buscar una opción "exportar ICO" en Guardar como, Exportar como o el panel Exportación de recursos no encuentra nada, y ningún plugin oficial la añade. Exporta PNG de 16, 32 y 48 px desde la mesa de trabajo icon y luego combínalos:
- Con ImageMagick instalado, basta un comando:
magick icon-16.png icon-32.png icon-48.png favicon.ico. - GIMP exporta .ico directamente a través de Archivo > Exportar como y te deja elegir qué capa se convierte en qué tamaño.
- Los generadores de favicon en línea aceptan los PNG y devuelven el .ico.
- Muchas cadenas de build generan el .ico a partir de un PNG o SVG de origen, en cuyo caso el desarrollador solo necesita tu 512 y tu SVG.
En cualquier caso, entrega los tres PNG junto con el .ico, para que pueda reconstruirse sin tu archivo de origen.
Las etiquetas que entregar al desarrollador
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
Y el manifiesto:
{
"name": "Brand name",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
Para que el favicon SVG siga el tema del sistema, añade un bloque de estilo dentro del archivo SVG:
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
Preguntas
¿Sigo necesitando un favicon de 16 x 16?
Sí, dentro del .ico. Las pestañas del navegador y las listas de marcadores en pantallas de densidad estándar siguen dibujándose a 16 px, y un 32 reducido se ve más suave que un mapa de bits dibujado para 16. Pon 16, 32 y 48 en el .ico, incluye el SVG para los navegadores que lo leen, y el 16 sigue en uso donde importa.
¿Qué tamaño debe tener el apple-touch-icon?
180 x 180 px, opaco, con esquinas rectas. iOS redondea las esquinas por su cuenta e ignora la transparencia, así que un símbolo sobre fondo transparente sale sobre un mosaico oscuro. Un solo archivo cubre los iPhone y iPad actuales; los tamaños antiguos de 57, 72, 114, 120 y 152 px son heredados y pueden omitirse.
¿Puede Illustrator exportar archivos .ico?
No. Ni Guardar como, ni Exportar como, ni Exportar para pantallas ofrecen ICO. Exporta los PNG de 16, 32 y 48 px desde Illustrator y combínalos con ImageMagick, GIMP, un conversor en línea o la herramienta de build del desarrollador. Entrega los PNG junto con el .ico para que pueda reconstruirse más adelante sin volver al archivo de origen.
¿El favicon debe ser el logo completo o solo el símbolo?
El símbolo. Un logotipo a 16 px es un borrón, y un icono de app se juzga junto a docenas de otros símbolos sin ningún nombre debajo. Usa el logomark, o una sola letra si la marca no tiene símbolo, y dale un fondo sólido para los iconos touch y maskable, de modo que se lea como un mosaico y no como una forma flotante.
Un clic para los archivos de logo, no para los iconos
Anchr Ship, la pestaña de exportación del panel Anchr Tools, está pensado para el paquete de logo y no para el conjunto de iconos. Vincula tres mesas de trabajo, logomark, logotipo y logo completo, genera variantes planas en negro y blanco como nuevas mesas de trabajo, y exporta cada mesa de trabajo como SVG, PNG en 2x con transparencia y PDF en una sola carpeta en una sola pasada, hasta 27 archivos nombrados según los nombres de las mesas de trabajo. No produce tamaños de favicon ni de icono de app. Para los tamaños de la tabla anterior, usa Exportar para pantallas como se describe; Ship cubre los archivos de logo SVG, PNG y PDF que van en la misma entrega. Ambos planes incluyen las cinco herramientas, con una prueba de 7 días; consulta los precios.