Generador de Favicon
Genera favicons en todos los tamaños desde una imagen.
¿Qué es un favicon y por qué es importante?
Un favicon (abreviatura de "favorite icon") es el pequeño icono que aparece en la pestaña del navegador, en la barra de marcadores, en el historial de navegación y en los resultados de búsqueda de Google. Aunque mide apenas unos pocos píxeles, su impacto en la identidad visual de tu sitio web es enorme. Un buen favicon refuerza el reconocimiento de marca, ayuda a los usuarios a distinguir tu pestaña entre docenas de pestañas abiertas y transmite profesionalismo. Los sitios sin favicon muestran un icono genérico del navegador, lo que resta credibilidad. Desde el punto de vista del SEO, Google muestra el favicon junto a los resultados de búsqueda en móvil, así que un icono atractivo puede mejorar tu tasa de clics (CTR) orgánica.
Tamaños necesarios y sus funciones
No existe un solo tamaño de favicon que sirva para todo. Cada plataforma y dispositivo espera un tamaño específico. 16x16 px es el tamaño clásico para las pestañas del navegador en escritorio. 32x32 px se usa en pestañas de alta resolución y como acceso directo en Windows. 48x48 px es utilizado por algunos navegadores como Chrome para la página de nueva pestaña. 180x180 px (apple-touch-icon) es el tamaño que iOS utiliza cuando un usuario guarda tu web como acceso directo en su pantalla de inicio. 192x192 px y 512x512 px son los tamaños requeridos por el estándar de Progressive Web Apps (PWA) para iconos de aplicación y pantallas de splash respectivamente. Finalmente, favicon.ico es el formato heredado que contiene múltiples tamaños en un solo archivo para compatibilidad con navegadores antiguos. Esta herramienta genera todos estos tamaños automáticamente a partir de una sola imagen.
Formatos de favicon: ICO vs PNG vs SVG
El formato ICO es el original, capaz de encapsular múltiples resoluciones en un único archivo. Es el más compatible y el único que funcionaba en versiones antiguas de Internet Explorer. El formato PNG es el estándar moderno: ofrece mejor compresión, transparencia alfa y es más fácil de generar. Todos los navegadores actuales lo soportan como favicon. El formato SVG es vectorial, lo que significa que se escala sin perder calidad a cualquier tamaño. Algunos navegadores modernos como Chrome y Firefox ya soportan favicons SVG mediante la etiqueta <link rel="icon" type="image/svg+xml">, pero Safari y algunos navegadores móviles aún no lo implementan completamente. La recomendación actual es servir PNG como formato principal e incluir un favicon.ico como fallback.
Cómo implementar favicons en tu HTML
Para una implementación completa, necesitas varias etiquetas <link> dentro del <head> de tu HTML. La etiqueta básica es <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. Para iOS necesitas <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Para PWAs, los iconos se declaran en el archivo manifest.json con sus rutas y tamaños. Esta herramienta te proporciona el código HTML completo listo para copiar y pegar, incluyendo todas las etiquetas necesarias para máxima compatibilidad entre navegadores y dispositivos.
Errores comunes al crear favicons
El error más frecuente es usar una imagen con demasiados detalles. A 16x16 px, los textos son ilegibles y las formas complejas se convierten en manchas de color. Otro error común es no generar todos los tamaños necesarios, lo que provoca que el navegador escale la imagen disponible y el resultado se vea borroso o pixelado. También es habitual olvidar el apple-touch-icon, lo que hace que iOS muestre una captura de pantalla de tu web en lugar de tu icono cuando alguien la guarda en su pantalla de inicio. Por último, muchos desarrolladores olvidan probar su favicon en modo oscuro: si tu icono tiene bordes oscuros sin fondo, puede desaparecer en navegadores con tema oscuro. Usa siempre un fondo sólido o asegúrate de que tu diseño tenga suficiente contraste en ambos modos.
Preguntas frecuentes
Genera 7 archivos: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180x180), icon-192x192.png (para Android/PWA), icon-512x512.png (para PWA splash) y favicon.ico.
Lo ideal es una imagen cuadrada de al menos 512x512 píxeles. Puedes usar PNG, JPG, SVG o WebP. Las imágenes con mucho detalle pueden perder legibilidad en tamaños pequeños (16x16), así que los iconos simples funcionan mejor. Evita fotografías complejas y prioriza formas geométricas claras con colores sólidos.
Descarga los archivos generados y colócalos en la raíz de tu sitio web (o en una carpeta como /icons/). Luego copia el código HTML proporcionado y pégalo dentro de la etiqueta <head> de tu página. Si usas un framework como Next.js o Nuxt, colócalos en la carpeta public/ y referencia las rutas en tu componente de layout.
Porque cada plataforma y cada contexto reclama un tamaño y un formato concreto: la pestaña del navegador usa 16×16 o 32×32, los iconos de marcador 48×48, iOS pide apple-touch-icon de 180×180 sin transparencia, Android usa 192×192 para el lanzador y 512×512 para la splash screen de PWA, y el favicon.ico clásico sigue siendo necesario para compatibilidad con navegadores antiguos y para la ruta /favicon.ico que muchos crawlers rastrean por defecto. Servir el archivo equivocado provoca iconos pixelados, recortes y cuadros vacíos en algunos dispositivos. Y como dato técnico: la generación se hace en tu navegador con Canvas, así que tu logo corporativo no atraviesa internet.
El formato ICO es el clásico, soportado por todos los navegadores incluyendo versiones antiguas de Internet Explorer. Puede contener múltiples tamaños en un solo archivo. PNG es el estándar moderno, más ligero y con mejor calidad. SVG es vectorial y se escala perfectamente a cualquier tamaño, pero su soporte como favicon todavía no es universal en todos los navegadores.
La causa más común es usar una imagen fuente de baja resolución o una imagen con demasiados detalles finos. Los favicons en pestañas se muestran a 16x16 o 32x32 píxeles, por lo que cualquier detalle sutil se pierde. Asegúrate de usar un diseño simple, con líneas gruesas y colores de alto contraste. También verifica que estés sirviendo el tamaño correcto para cada contexto.