Generador de Favicon
Crea tu favicon en todos los tamaños necesarios gratis, directamente en tu navegador.
.jpg, .png, .webp · hasta 50 MB
Por qué usarlo
El favicon correcto para cada dispositivo y navegador
Todos los formatos
Genera .ico, .png y todos los tamaños para iOS, Android y PWA.
100% privado
El procesado ocurre en tu navegador. Tu logo no sale de tu dispositivo.
Todos los tamaños
16×16, 32×32, 180×180, 192×192 y 512×512. Listos para producción.
Instantáneo
Resultado inmediato. Sin colas, sin registro, sin límites.
Cómo funciona
Tres pasos, sin complicaciones
Sube tu imagen o logo
Arrastra o selecciona un PNG, SVG, JPG o WebP cuadrado. Mínimo 512×512 px recomendado.
Previsualiza los tamaños generados
Obtén automáticamente 16×16, 32×32, 180×180 (Apple Touch Icon), 192×192 y 512×512 px.
Descarga el paquete de favicons
Descarga todos los tamaños generados, listos para añadir a tu proyecto web.
Preguntas frecuentes
¿Tienes dudas?
Un conjunto completo de favicons moderno requiere: 16×16 px (pestaña del navegador en Windows/Linux), 32×32 px (pestaña en macOS y marcadores), 180×180 px (Apple Touch Icon, guardado en pantalla de inicio iOS), 192×192 px (Android Chrome añadir a pantalla de inicio), y 512×512 px (pantalla de bienvenida de PWA en Android). El archivo favicon.ico en la raíz del sitio puede contener múltiples resoluciones embebidas (16, 32, 48 px) en un único fichero. Para los navegadores modernos, basta con un PNG de 32×32 referenciado en el HTML. Sin embargo, para máxima compatibilidad con dispositivos Apple, apps de bookmarking y PWA, el conjunto completo es necesario.
El formato .ico es el formato original de favicon, introducido por Internet Explorer 5 en 1999. Puede contener múltiples resoluciones en un solo archivo y tiene soporte universal, incluyendo navegadores muy antiguos. El formato .png es más simple: un archivo por tamaño, soporte nativo en todos los navegadores modernos, y mejor calidad de compresión que .ico para resoluciones altas. El formato .svg como favicon es soportado por Chrome, Firefox y Edge modernos pero no por Safari ni iOS. La ventaja del SVG es que escala perfectamente a cualquier tamaño y puede adaptar su apariencia al modo oscuro del sistema mediante media queries CSS (@media (prefers-color-scheme: dark)). La recomendación actual: usa .ico para compatibilidad básica, .png para las resoluciones específicas, y opcionalmente .svg para navegadores modernos.
El Apple Touch Icon es el icono que iOS y macOS Safari usan cuando el usuario guarda un sitio web en la pantalla de inicio del iPhone/iPad o lo añade a la dock del Mac. A diferencia de los favicons normales (que iOS ignora para este propósito), el Apple Touch Icon debe ser un PNG de 180×180 px (para Retina), sin capas de transparencia (iOS añade las esquinas redondeadas y el brillo automáticamente), y se declara en el HTML como: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. Si no se especifica ningún Apple Touch Icon, iOS captura automáticamente un screenshot de la página como icono, con resultados visuales muy pobres.
La forma correcta de declarar los favicons modernos en el <head> del HTML es: <link rel='icon' type='image/x-icon' href='/favicon.ico'> para compatibilidad básica, <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> para navegadores modernos, <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> para iOS, y <link rel='manifest' href='/site.webmanifest'> para PWA. El archivo site.webmanifest es un JSON que declara los iconos de 192×192 y 512×512. Los navegadores modernos priorizan el manifest sobre las etiquetas link individuales, por lo que el manifest es especialmente importante para PWA.
favicon.ico es el estándar de facto desde 1999, interpretado por todos los navegadores incluso sin ninguna etiqueta HTML (los navegadores buscan automáticamente /favicon.ico en la raíz). El web app manifest (manifest.json o site.webmanifest) es el estándar moderno para PWA (Progressive Web Apps), introducido con el estándar W3C Web App Manifest en 2013. Además de los iconos, el manifest declara nombre, colores de tema, modo de visualización y otras propiedades de la aplicación. Para un sitio web normal sin funcionalidades PWA, favicon.ico + PNG + Apple Touch Icon es suficiente. Para una PWA completa con instalación en pantalla de inicio, el manifest es imprescindible.
Favicons: historia, estándares web y branding en la pestaña del navegador
El favicon es uno de los elementos más pequeños y más reconocibles de la identidad visual de un sitio web. Su historia comienza en marzo de 1999 cuando Microsoft Internet Explorer 5 introdujo el soporte para favicon.ico como parte de la función de 'Favoritos': al guardar un sitio, IE5 hacía una petición a /favicon.ico para mostrar el icono junto al marcador. El nombre 'favicon' viene de 'favorites icon'. El estándar se formalizó en la RFC 2616 y W3C en 2000 con la etiqueta <link rel='shortcut icon'>. Hoy, más de 25 años después, el favicon ha evolucionado de un simple archivo .ico de 16×16 píxeles a un ecosistema de iconos para pestañas, marcadores, pantallas de inicio móviles y pantallas de splash de aplicaciones.
El formato ICO es técnicamente un contenedor de imágenes que puede incluir múltiples resoluciones y profundidades de color en un único archivo. Fue desarrollado originalmente por Microsoft para los iconos del escritorio de Windows y adaptado para la web. Una curiosidad técnica: un archivo .ico puede incluir imágenes PNG comprimidas dentro del contenedor ICO desde Windows Vista (2007), lo que reduce significativamente el tamaño del archivo. Los favicons SVG, soportados por Chrome 80+ y Firefox 41+, tienen una ventaja única: pueden usar media queries CSS para adaptar automáticamente el diseño al modo oscuro del sistema. Esto permite tener un favicon negro sobre blanco en modo claro y blanco sobre negro en modo oscuro, todo en un único archivo de vectores de pocos kilobytes.
En el contexto de los Core Web Vitals de Google, el favicon tiene una implicación de rendimiento a menudo ignorada. El navegador descarga el favicon en una petición separada al cargar la página, y si el archivo favicon.ico no existe, el servidor responde con un 404 que puede incluir una página HTML de error de varios kilobytes. Para sitios que reciben millones de visitas, este 404 repetido puede generar una cantidad significativa de tráfico innecesario. La solución es siempre tener un favicon.ico en la raíz, incluso si es solo un archivo de 16×16 px de tamaño mínimo, para evitar estos 404s en cada visita.