Generador de favicon

Importa una imagen y genera todos los tamaños estándar de favicon en PNG.

Arrastra y suelta una imagen aquí, o haz clic para seleccionar

Las imágenes cuadradas dan los mejores resultados (PNG, JPG, SVG)

Explicación de los tamaños de favicon

16×16 · favicon de pestaña de navegador estándar

32×32 · pestaña Retina, atajo de barra de tareas

48×48 · atajo de sitio Windows

180×180 · Apple Touch Icon (pantalla de inicio de iOS)

192×192 · Android Chrome, icono de manifest PWA

512×512 · pantalla de inicio PWA, búsqueda de Google

Una breve historia del favicon

El favicon nació como una característica de Microsoft en Internet Explorer 5, lanzado en marzo de 1999. Microsoft introdujo la convención de buscar /favicon.ico en la raíz del sitio y mostrarlo junto a los sitios marcados en la barra de Favoritos, de ahí el nombre «favicon» (favorite icon). La elección original fue el formato propietario ICO de Windows, capaz de contener varios tamaños de bitmap en un mismo archivo. Otros navegadores adoptaron la convención casi de inmediato y empezaron también a admitir favicons PNG, señalados con etiquetas <link rel="icon"> en el head del documento. El iPhone de Apple (lanzado en 2007) añadió la convención apple-touch-icon, un PNG 180×180 usado cuando el usuario añade un sitio a la pantalla de inicio de iOS, mostrado al mismo tamaño que un icono de aplicación nativa. Las Progressive Web Apps (PWA, formalizadas hacia 2015) añadieron el archivo manifest.json con su array icons, exigiendo variantes 192×192 (aviso de instalación de Chrome) y 512×512 (pantallas de inicio PWA, pantallas de inicio Android, anclaje en el menú Inicio de Windows). Los favicons SVG (admitidos en Firefox desde la versión 41 en 2015, Chrome desde la versión 80 en febrero de 2020, Safari desde la versión 12.1 en 2019) son hoy la recomendación moderna cuando el icono es una forma simple, un solo archivo escala perfectamente a cualquier densidad de pantalla. El archivo favicon.ico heredado sigue siendo necesario para Internet Explorer 11 y navegadores más antiguos; las pilas modernas envían el SVG más un ICO de respaldo y un PNG apple-touch-icon.

¿Por qué tantos tamaños?

Cada tamaño del juego de favicons sirve a un contexto de renderizado distinto. 16×16 es el favicon clásico de pestaña en DPI estándar, el tamaño que enseñó a los diseñadores lo brutales que pueden ser las restricciones de píxeles. 32×32 es el tamaño de pestaña en alta DPI (Retina); muchos navegadores modernos lo prefieren incluso para pantallas «estándar» porque se reduce mejor que 16×16 escala hacia arriba. 48×48 es el tamaño que Windows usa para accesos directos en la barra de tareas y sitios anclados. 180×180 es el apple-touch-icon, mostrado cuando el usuario añade un sitio a la pantalla de inicio de iOS. 192×192 es el aviso de instalación de web apps de Chrome y el icono estándar de la pantalla de inicio de Android. 512×512 es el icono de pantalla de inicio de PWA, las miniaturas de los resultados de Google y los iconos de mosaico del menú Inicio de Windows. La razón por la que un solo archivo de alta resolución no basta: en los tamaños más pequeños, el icono suele necesitar simplificación ajustada a mano para seguir siendo legible (un logotipo complejo en 16×16 se vuelve una mancha de color), por lo que el diseño profesional de favicons implica típicamente dos o tres variantes, una versión detallada para los tamaños grandes, una simplificada para los medianos y una versión «solo marca» para los más pequeños. Este generador escala una sola fuente mediante reducción estándar de vecino más cercano o bilineal, lo que va bien para formas simples; los logotipos complejos pueden necesitar retoque manual en los tamaños más pequeños.

El HTML que acompaña a los archivos

Generar los archivos es la mitad del trabajo; la otra mitad son las etiquetas meta de tu <head> que indican al navegador qué archivo usar en qué contexto. La pila mínima viable de favicon en 2026:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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">

El navegador elige el archivo más apropiado según la densidad de píxeles del dispositivo y los formatos que admita. Los navegadores modernos prefieren el SVG cuando está; los antiguos vuelven a los tamaños PNG; iOS usa el apple-touch-icon; la instalación PWA lee el manifiesto. El favicon.ico en la raíz se sigue recogiendo automáticamente como respaldo por defecto incluso sin etiqueta link explícita, todo sitio debería tener uno por compatibilidad hacia atrás con navegadores y herramientas muy antiguos.

Cuándo necesitas realmente generar favicons

Diseñar para la restricción de 16×16

El favicon de 16×16 es la restricción más exigente del diseño de interfaces moderno. 256 píxeles (todo el lienzo del icono) deben transmitir suficiente identidad de marca para que el usuario encuentre tu pestaña entre veinte más. Consejos prácticos de diseñadores que lo han hecho muchas veces: Simplifica con agresividad. Un logotipo complejo en 16×16 es una mancha de color. Quita detalle hasta que solo quede la forma mínima reconocible. Maximiza el contraste contra los fondos de pestaña. Las pestañas del navegador suelen ser gris claro o gris oscuro; un icono con contraste débil desaparece en el cromo. Prefiere formas únicas y rotundas a líneas finas. Las líneas de menos de 2 px de ancho se aliasen a gris a 16 px y se vuelven invisibles. Prueba al tamaño real en tu navegador. Lo que se ve bien en tu herramienta de diseño en 256×256 puede ser ilegible en 16×16. Abre varias pestañas de tu sitio y míralas en la barra de pestañas, esa es la prueba real. Considera el caso del modo oscuro. Un icono diseñado para una barra de pestañas blanca puede ser invisible en una oscura. Los favicons SVG pueden incluir una media query prefers-color-scheme dentro del SVG para adaptación automática claro/oscuro; para los respaldos ICO y PNG, diseña algo que funcione en ambos fondos.

Lo que produce este generador

Privacidad: procesamiento de imagen solo en el navegador

Un logotipo o imagen de marca que subes para generar un favicon puede ser confidencial, trabajo de marca previo al lanzamiento, branding de herramienta interna, logotipos de cliente bajo NDA. Los generadores de favicons en servidor (el muy popular RealFaviconGenerator y similares) toman una copia de cada imagen subida en su infraestructura, donde queda en registros y cachés. Este generador se ejecuta enteramente en tu navegador vía la API Canvas: la imagen se lee en el navegador, se escala a cada tamaño de favicon por el pipeline de redimensionado integrado del navegador y se empaqueta para descarga, todo en tu pestaña. Verifica en la pestaña Red de DevTools mientras subes (no se disparan peticiones después de cargar la página), o pon la página fuera de línea (modo avión) tras cargarla y el generador sigue funcionando con archivos locales. Seguro para trabajo de marca no anunciado, logotipos de cliente bajo NDA, branding de herramienta interna o cualquier imagen que no querrías ver copiada en el disco duro de un desconocido.

Herramientas relacionadas

Compresor de imágenes

Comprime tus imágenes hasta un 80 % más pequeñas. Arrastrar y soltar, descarga instantánea. Sin subida a servidor.

Redimensionador de imagen

Redimensiona tus imágenes a dimensiones exactas en píxeles. Preajustes para redes sociales, web y más.

Convertidor de imágenes

Convierte entre PNG, JPEG y WebP. Conversión por lotes de varios archivos a la vez.