2026-06-28
Convertir imagen a favicon: tamaños, formatos y HTML
Convierte una imagen en favicon con tamaños correctos para navegador, Apple Touch y Android, formatos PNG ICO SVG y etiquetas HTML listas para publicar.
Última actualización: June 28, 2026. El soporte de favicons en navegadores evoluciona; los tamaños y formatos principales aquí cubren el panorama actual.
Un favicon es el pequeño icono que aparece en la pestaña del navegador, una lista de marcadores y la pantalla de inicio de un teléfono cuando alguien guarda tu sitio. Convertir una imagen en un favicon significa crear los tipos de archivo correctos con los tamaños adecuados para que el icono se vea nítido dondequiera que aparezca, desde una pestaña de navegador de 16 píxeles hasta un icono Apple Touch de 180 píxeles. Esta guía cubre los tamaños que espera cada plataforma, los formatos de archivo a generar y cómo mantener el icono reconocible en tamaños diminutos.
Respuesta rápida: ¿cómo crear un favicon a partir de una imagen?
Comience con una imagen fuente cuadrada (o recórtela a cuadrado con el image cropper), redimensiónelo hasta los tamaños estándar de favicon (16px, 32px, 180px, 512px), y expórtelo como PNG más un archivo ICO para navegadores antiguos. Referéncielos en el <head> de su HTML con las etiquetas de enlace apropiadas. Pruebe la versión de 16px en una pestaña del navegador, porque si el icono no es reconocible a ese tamaño, ninguna cantidad de versiones más grandes lo arreglará. Mantenga también la versión SVG si el logotipo es vectorial, para un renderizado nítido en pantallas de alta DPI.
¿Qué tamaños necesita un favicon?
Diferentes contextos muestran el favicon en diferentes tamaños, y proporcionar los tamaños correctos lo mantiene nítido en todas partes.
| Size | File | Used for |
|---|---|---|
| 16x16 | ICO / PNG | Pestaña del navegador (legado) |
| 32x32 | ICO / PNG | Pestaña del navegador (retina) |
| 180x180 | PNG | Icono de contacto de Apple |
| 192x192 | PNG | Pantalla de inicio de Android |
| 512x512 | PNG | PWA / pantalla de bienvenida |
| Any | SVG | Navegadores modernos, alta DPI |
- La versión de 16px es la más importante: es lo que la mayoría de las personas ven en una pestaña.
- El icono de contacto de Apple necesita 180px para mostrarse nítidamente en la pantalla de inicio de iOS.
- SVG sirve a los navegadores modernos con cualquier resolución sin múltiples archivos.
- Un ICO puede agrupar múltiples tamaños para soporte heredado (legacy).
¿Cómo diseñar un favicon que funcione a 16px?
El desafío de un favicon es que debe ser reconocible a 16 píxeles, lo cual es muy pequeño. Los detalles que se ven bien en 512px desaparecen a 16px, por lo que el diseño debe ser simple.
- Usar una forma única y audaz: una letra, un emblema de logotipo, un icono simple.
- Evitar líneas finas y texto pequeño: desaparecen a 16px.
- Usar alto contraste para que la forma resalte contra el fondo de la pestaña.
- Probar la versión de 16px en tamaño real antes de implementarla.
Un error común es usar el logotipo completo con texto. A 16px, el texto es ilegible, por lo que el favicon parece una mancha borrosa. La solución es extraer el elemento más reconocible —el icono o la primera letra— y usarlo como favicon. La guía de SVG a PNG cubre cómo exportar marcas vectoriales en los tamaños que necesita.
¿Qué formatos de archivo debería generar?
Los favicons abarcan varios formatos porque el soporte del navegador evolucionó con el tiempo, y cubrirlos todos garantiza que el ícono funcione en todas partes.
- ICO — el formato heredado (legacy), agrupa múltiples tamaños y es compatible con todos los navegadores.
- PNG — el estándar moderno, un archivo por tamaño.
- SVG — vectorial, se escala a cualquier tamaño y es compatible con navegadores modernos.
- Apple Touch PNG — específicamente 180x180, para íconos de pantalla de inicio de iOS.
| Format | Cuándo usarlo |
|---|---|
| ICO | Soporte de navegador heredado, agrupa tamaños |
| PNG | Navegadores modernos, archivos por tamaño |
| SVG | Navegadores modernos, archivo escalable único |
| Apple Touch PNG | Pantalla de inicio de iOS |
Genere un ICO para compatibilidad heredada, PNGs en cada tamaño para un soporte amplio y un SVG si la fuente es vectorial. El image converter se encarga de generar el formato, y el image cropper primero obtiene el cuadrado fuente.
¿Cómo se hacen referencia a los favicons en HTML?
Los archivos generados deben hacer referencia en la etiqueta <head> de la página para que los navegadores los encuentren. Las etiquetas link le dicen al navegador qué archivo usar para qué contexto.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
- El ICO cubre navegadores heredados con tamaños empaquetados.
- El SVG sirve a los navegadores modernos en cualquier resolución.
- El icono de Apple Touch cubre los guardados en la pantalla de inicio de iOS.
- Coloque los archivos en la raíz del sitio para máxima compatibilidad.
La guía de favicons de Mozilla documenta las etiquetas link y el comportamiento del navegador, y la guía de iconos de aplicaciones de Web.dev cubre el estándar de icono enmascarable para Android. Pruebe el resultado en una pestaña de navegador real y en la pantalla de inicio de un teléfono después de implementar, porque las peculiaridades de renderizado solo aparecen en los contextos reales.
Diseño de favicons para modo claro y oscuro
Los navegadores y sistemas operativos modernos cambian entre modo claro y oscuro, y un favicon que se ve bien en una pestaña clara puede desaparecer en una oscura. Un PNG con fondo transparente o un SVG con colores adaptativos maneja ambos contextos, porque el ícono se adapta al chrome circundante en lugar de llevar su propio fondo.
| Desafío del modo | Solución |
|---|---|
| El ícono oscuro desaparece en la pestaña oscura | Añadir un contorno sutil o usar transparencia |
| El ícono claro desaparece en la pestaña clara | Lo mismo — contorno o color adaptativo |
| Baja legibilidad a 16px | Simplificar forma, aumentar contraste |
Para los favicons SVG, puedes usar la media query prefers-color-scheme dentro del SVG para servir diferentes colores para contextos claros y oscuros, lo cual es la solución más limpia. Para PNG, un fondo transparente con una forma que tiene suficiente contraste interno funciona aceptablemente en ambos. El objetivo es que el favicon sea legible en una pestaña independientemente de si el usuario utiliza modo claro u oscuro, lo cual es cada vez más la norma y no la excepción.
Errores comunes de favicon
- Demasiados detalles — el icono es irreconocible a 16px. Simplifica.
- Fuente no cuadrada — recorta a cuadrado primero o el icono se distorsiona.
- Falta el icono de Apple Touch — las guardadas de iOS muestran una captura de pantalla genérica en su lugar.
- Sin SVG — las pantallas de alto DPI renderizan un PNG borroso en lugar de un vector nítido.
- Olvidar probar a 16px — el tamaño que la mayoría de las personas ven es el más frecuentemente descuidado.
El favicon es pequeño, pero aparece dondequiera que se represente su sitio: pestañas, marcadores, pantallas de inicio y resultados de búsqueda. Un icono nítido y reconocible en todos los tamaños refuerza la marca de un vistazo, mientras que un favicon borroso o ausente indica falta de pulcritud. Dedica tiempo a conseguir que la versión de 16px sea correcta, genera el conjunto completo de tamaños y formatos, y el icono representará el sitio limpiamente dondequiera que aparezca. La inversión es pequeña — una sola tarde de trabajo de diseño y exportación — pero vale la pena cada vez que un usuario ve su sitio en una pestaña, un marcador o una pantalla de inicio, lo cual ocurre con mucha más frecuencia de lo que la mayoría de los equipos se dan cuenta.
Preguntas frecuentes
¿Qué tamaños necesita un favicon?
Un conjunto moderno: 16×16, 32×32, 48×48 (clásico), además de 180×180 (icono táctil de Apple) y 192×192 / 512×512 (Android). Una imagen maestra genera todo el conjunto. El navegador selecciona el tamaño correcto según el contexto.
¿Cómo diseño un favicon que funcione a 16px?
Mantenlo simple: una forma audaz, alto contraste, sin detalles finos ni texto. A 16px, cualquier cosa intrincada se convierte en un borrón. Prueba el diseño a 16px antes de comprometerte; si no se distingue allí, es demasiado complejo.
¿Qué formatos de archivo debe usar un favicon?
ICO para compatibilidad heredada (legacy), PNG para navegadores modernos e iconos de Apple/Android, y SVG para una versión independiente de la resolución donde sea compatible. Genera el conjunto completo; un formato no cubre todos los dispositivos.
¿Cómo referencio favicons en HTML?
Con etiquetas <link rel="icon"> que apuntan a cada tamaño y formato, además de <link rel="apple-touch-icon"> para iOS. El navegador selecciona la mejor coincidencia. Un conjunto completo de etiquetas de enlace cubre todas las plataformas.
¿Puedo usar una imagen para todos los tamaños de favicon?
Sí: un único maestro cuadrado (512×512 o más grande) genera todo el conjunto, desde 16×16 hasta 512×512. Diseña el maestro para que se lea a 16px (una forma audaz) para que incluso el tamaño más pequeño funcione. Un maestro, muchos tamaños.
¿Cómo pruebo un favicon?
Abre el sitio en una pestaña del navegador y comprueba el icono a 16px (tamaño de la pestaña), 32px (marcadores) y 180px (Apple touch). Si la versión de 16px no se distingue, el diseño es demasiado complejo: simplifícalo a una forma audaz. Los favicons son pequeños pero aparecen en todas partes, por lo que un icono nítido y reconocible en todos los tamaños refuerza la marca de un vistazo.
¿Qué es un archivo ICO?
Un formato contenedor heredado que contiene una o más imágenes rasterizadas en diferentes tamaños, utilizado para favicons en navegadores antiguos (notablemente el antiguo Internet Explorer). Los navegadores modernos usan PNG y SVG, por lo que ICO es principalmente una capa de compatibilidad hacia atrás. Genera un ICO junto con tu conjunto PNG/SVG para que todos los navegadores, por muy viejos que sean, obtengan un icono.
Usa las herramientas gratuitas mientras sigues la guía.
Sigue leyendo
Tue Mar 24 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Cómo añadir una marca de agua a fotos (Protección de derechos de autor)
Protege tus fotos añadiendo una marca de agua para derechos de autor. Cubrimos colocación en esquina, cuadrícula o centro tenue, cómo hacer marcas por lotes y el equilibrio entre seguridad y calidad de imagen.
Thu Mar 19 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Cómo crear un efecto duotono en fotos (Guía de diseño)
Crea un efecto duotono en fotos: aprende cómo funciona el tinte de dos colores, los mejores pares y cómo aplicarlo en Canva, Photoshop o ImageMagick.
Thu Mar 12 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Guía de SEO de Imágenes 2026: Rastrea, clasifica y consigue citas
Flujo de trabajo práctico de SEO de imágenes 2026 para archivos rastreables, alt text, nombres de archivo, schema, entrega CDN, Core Web Vitals y visibilidad GEO.