Info Qué Es un Favicon: Tamaños, Formatos y Cómo Agregar Uno
Qué es un favicon, los tamaños y formatos que esperan los navegadores, y cómo agregar uno con una etiqueta HTML — y por qué el validador marca su ausencia.
Un favicon ("favorite icon", ícono favorito) es la pequeña imagen cuadrada que un navegador muestra junto al título de una página — en la barra de pestañas, en marcadores, en el historial y junto a los resultados de búsqueda en móvil. El nombre data de 1999, cuando Internet Explorer 5 introdujo la función y los navegadores empezaron a solicitar automáticamente un archivo llamado favicon.ico desde la raíz de un sitio.
¿Qué tamaño debe tener un favicon?
| Tamaño | Uso |
|---|---|
| 16×16 | Pestaña del navegador (pantallas estándar) |
| 32×32 | Pestaña del navegador (pantallas de alta densidad/retina), barra de tareas |
| 48×48 | Accesos directos de sitios en Windows, algunas interfaces de navegador |
| 180×180 | apple-touch-icon — marcador en pantalla de inicio de iOS |
| 192×192 / 512×512 | Íconos del manifiesto de app web (pantalla de inicio de Android, instalación de PWA) |
En vez de elegir un solo tamaño, el enfoque moderno agrupa varios en un solo archivo .ico (los navegadores eligen el que mejor encaje) o lista varias etiquetas <link> con distintos atributos sizes, como se ve abajo.
Favicon.ico vs. PNG vs. SVG
.ico es el formato original y más universalmente soportado — y, de forma única, un solo archivo .ico puede agrupar varios tamaños internamente, así que el navegador o el sistema operativo elige el que mejor encaje en lugar de estirar una sola imagen fija. Los navegadores modernos también aceptan favicons simples en .png y .svg mediante <link rel="icon">; SVG tiene la ventaja de escalar perfectamente a cualquier tamaño desde un solo archivo, a costa de no tener soporte en algunos navegadores más antiguos. La mayoría de los sitios reales incluyen un .ico como respaldo seguro junto con variantes PNG/SVG para navegadores modernos.
Cómo agregar un favicon a tu sitio
<head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>Con un solo <link rel="icon" href="/favicon.ico"> ya alcanza para tener un favicon funcional — las líneas extra de SVG e ícono de Apple de arriba son acompañantes comunes, no requisitos. El validador marca un documento que no tenga ninguna de estas (ni el rel="shortcut icon" más antiguo) en ninguna parte de <head>.
Por qué importa
Sin un enlace de favicon explícito, los navegadores igual solicitan /favicon.ico en la raíz del dominio por defecto — así que un enlace faltante no es fatal, pero significa que no hay control sobre el ícono y, si esa ruta por defecto da un 404 (como pasa en la mayoría de las apps de una sola página y sitios basados en API), la pestaña muestra un ícono en blanco o genérico. Es un detalle pequeño, pero un favicon faltante o roto es una de las señales más visibles de un sitio inacabado, apareciendo en cada pestaña abierta, marcador y entrada del historial del navegador.
Frequently asked questions
¿Qué significa "favicon"?
Es la abreviatura de "favorite icon" (ícono favorito) — el pequeño ícono que los navegadores muestran para una página marcada como favorita, un término acuñado cuando Internet Explorer 5 introdujo la función en 1999.
¿Cómo convierto un PNG a favicon?
Usa el conversor gratuito de PNG a ICO de Pingfloat — agrupa la imagen en un archivo .ico de múltiples tamaños (16, 32, 48 y 256px) por completo en el navegador, sin necesidad de subir nada.
¿Un favicon faltante perjudica el SEO?
No directamente como factor de ranking, pero Google sí muestra el favicon de una página junto a su resultado en la búsqueda móvil — uno faltante o roto hace que un listado se vea menos pulido frente a competidores que sí lo tienen.
¿En qué formato debería estar un favicon?
Un archivo .ico es la base más segura para amplia compatibilidad, pero los navegadores modernos también soportan .png y .svg mediante rel="icon". Varias etiquetas <link rel="icon"> con distintos tamaños/formatos es la mejor práctica actual.
¿favicon.ico sigue siendo necesario si uso íconos PNG/SVG?
No estrictamente, pero es un respaldo seguro — los navegadores solicitan /favicon.ico por defecto desde 1999, y algunas herramientas y navegadores más antiguos solo buscan ese archivo exacto, ignorando por completo <link rel="icon">.