El favicon es ese pequeño icono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda junto a la URL de tu sitio. Aunque es diminuto, es uno de los elementos más visibles de la identidad visual de tu marca en la web. Un sitio sin favicon se ve inacabado y poco profesional.
¿Qué tamaños de favicon necesitas en 2026?
La respuesta corta: más de los que crees. Los navegadores modernos, los dispositivos móviles y las aplicaciones web progresivas (PWA) requieren diferentes tamaños. Aquí están los esenciales:
| Tamaño | Uso | Formato |
|---|---|---|
| 16x16 | Pestaña del navegador (estándar) | ICO o PNG |
| 32x32 | Pestaña del navegador (retina) | PNG |
| 180x180 | Apple Touch Icon (iPhone/iPad) | PNG |
| 192x192 | Android Chrome / PWA | PNG |
| 512x512 | PWA splash screen / Google | PNG |
| favicon.ico | Compatibilidad legacy | ICO (multi-size) |
Cómo implementar el favicon correctamente
El HTML necesario para cubrir todos los navegadores y dispositivos incluye varias etiquetas <link> en el <head> de tu página:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
El archivo site.webmanifest es necesario para las PWA y contiene las rutas a los iconos de 192x192 y 512x512 que Android Chrome utiliza.
Consejos de diseño para favicons efectivos
- Simplicidad ante todo. A 16x16 píxeles, los detalles finos se pierden. Usa formas simples y colores sólidos.
- No uses tu logotipo completo. En la mayoría de los casos, una versión simplificada o solo el símbolo/icono funciona mejor que el logo completo con texto.
- Contraste con fondos claros y oscuros. Recuerda que las pestañas del navegador pueden ser blancas o negras dependiendo del tema del sistema.
- Evita texto. Las letras son ilegibles a 16x16 píxeles. Si necesitas incluir texto, limítalo a una sola letra o inicial.
- Parte de una imagen SVG. Si tienes tu logo en formato SVG, puedes convertirlo a PNG en los tamaños exactos que necesitas.
Errores comunes al crear favicons
El error más frecuente es usar solo favicon.ico y olvidar los tamaños para móviles. Los dispositivos Apple mostrarán una captura de pantalla genérica si no proporcionas un apple-touch-icon. Otro error común es usar una imagen de baja resolución como fuente: siempre parte de una imagen de al menos 512x512 para que las reducciones se vean bien.
Genera Todos los Tamaños de Favicon
Sube una imagen y genera automáticamente todos los tamaños de favicon necesarios para navegadores, móviles y PWA. Incluye el código HTML listo para copiar.
Abrir Generador de FaviconFrequently Asked Questions
¿Puedo usar un PNG como favicon en lugar de ICO?
Sí. Todos los navegadores modernos soportan PNG como favicon. Sin embargo, es recomendable incluir también un archivo favicon.ico como respaldo para navegadores legacy y algunos lectores de RSS que solo buscan ese archivo específico.
¿Qué imagen fuente debo usar?
Lo ideal es una imagen cuadrada de al menos 512x512 píxeles. Si tienes tu logo en SVG, es la fuente perfecta porque puedes generar PNGs a cualquier tamaño sin perder calidad. Evita usar fotografías complejas ya que no se verán bien a 16x16 píxeles.
¿Cómo verifico que mi favicon se ve bien?
Abre tu sitio en el navegador y revisa la pestaña. Para verificar los tamaños móviles, agrega tu sitio a la pantalla de inicio de un iPhone o Android. También puedes buscar tu sitio en Google para ver cómo aparece el favicon en los resultados de búsqueda.