Cómo añadir un favicon a un sitio web

Last updated: 05.04.2026

Un favicon (abreviatura de «icono de favoritos») es un pequeño icono gráfico asociado a un sitio web. Se muestra en las pestañas del navegador, marcadores, historial de navegación y, a veces, en los resultados de búsqueda, lo que ayuda a los usuarios a reconocer e identificar rápidamente un sitio. Los favicons cumplen una función tanto práctica como de imagen de marca, ya que mejoran la navegación y hacen que un sitio web sea visualmente distintivo.

En el pasado, el formato .ico se usaba comúnmente para los favicons. Hoy en día, se considera obsoleto y, en la mayoría de los casos, ya no es necesario. Los navegadores modernos son totalmente compatibles con los formatos PNG y SVG, que son más fáciles de gestionar y ofrecen mejor calidad, especialmente en pantallas de alta resolución.

El formato SVG es especialmente útil porque se basa en vectores y se adapta perfectamente a cualquier pantalla. A diferencia del formato PNG, no requiere múltiples tamaños. No existe un tamaño fijo para un favicon SVG, pero se recomienda usar un viewBox como 0 0 32 32 o 0 0 64 64 y mantener el diseño simple para que se vea con claridad en tamaños pequeños.

Configuración recomendada

A continuación se muestra una configuración práctica que abarca los navegadores modernos y los dispositivos Apple:

HTML

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Esta combinación garantiza:

SVG para navegadores modernos (mejor calidad y escalabilidad)
PNG como alternativa para mayor compatibilidad
Icono táctil de Apple para la pantalla de inicio de iOS

Dónde colocar los archivos

Coloca los archivos de iconos en el directorio raíz de tu sitio web o en una carpeta dedicada /icons/. Luego, incluye las etiquetas <link> dentro de la sección <head> de tu documento HTML.

Este método para añadir un favicon está obsoleto. Ya no se recomienda, pero aún se ve con frecuencia en algunos sitios web.

<link rel="shortcut icon" href="/favicon.ico">

Notas adicionales

Tras añadir o actualizar un favicon, es posible que tengas que borrar la caché del navegador para ver los cambios. Además, algunas plataformas CMS ofrecen ajustes de favicon integrados.

Normalmente añado un favicon como se describe anteriormente. Para generar iconos, utilizo el servicio: https://realfavicongenerator.net/

En resumen, usar SVG como formato principal, junto con PNG como alternativa y un icono táctil de Apple, proporciona una configuración de favicon moderna, limpia y fiable sin depender de archivos .ico obsoletos.

Publicaciones similares:

Rotación infinita con animación CSS
Las animaciones CSS permiten crear una amplia gama de efectos visualmente atractivos sin necesidad de JavaScript. Gracias a las funciones modernas de CSS, los desarrollad...
Problema de escala de imagen en Outlook
Crear diseños de correo electrónico en HTML es un proceso bastante complejo y no siempre agradable. Esto se debe principalmente a que muchos clientes de correo electrónic...
Cómo crear un menú desplegable utilizando solo HTML y CSS
En un artículo anterior, vimos cómo crear un menú desplegable con JavaScript (jQuery). En este artículo, veremos cómo crear un menú desplegable usando solo HTML y CSS. Es...