Añadir un favicon a tu sitio web es una de las cosas más sencillas pero con mayor impacto que puedes hacer. Aquí tienes la guía completa de código HTML, desde lo mínimo indispensable hasta la configuración profesional completa.

Paso 1: Prepara tus archivos de Favicon

Antes de escribir cualquier HTML, necesitas los archivos de icono reales. Tienes dos opciones:

Como mínimo, necesitarás:

Paso 2: Coloca los archivos en tu directorio raíz

Sube tus archivos de favicon a la raíz de tu sitio web (al mismo nivel que index.html). Los navegadores buscan automáticamente /favicon.ico en la raíz, incluso sin ninguna declaración HTML.

your-website/
├── index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

Paso 3: Añade HTML a tu <head>

Configuración mínima (2 líneas)

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Esto gestiona las pestañas del navegador y la pantalla de inicio de iOS. Suficiente para la mayoría de los proyectos personales.

Configuración recomendada (5 líneas)

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Esto cubre todos los navegadores modernos, iOS, Android y PWA. Esto es lo que recomendamos para sitios web en producción.

Configuración profesional completa (con color de tema)

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">

El archivo site.webmanifest

Este archivo JSON informa a Android y a las PWA sobre tus iconos:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Instrucciones específicas por Framework

React (Create React App / Vite)

Coloca los archivos de favicon en la carpeta public/ y añade las etiquetas de enlace a public/index.html (CRA) o index.html (Vite).

Next.js (App Router)

Coloca favicon.ico en el directorio app/. Next.js 13+ lo sirve automáticamente. Para otros formatos, usa la exportación metadata en layout.tsx.

WordPress

Ve a Apariencia → Personalizar → Identidad del sitio → Icono del sitio. Sube un PNG de 512×512 y WordPress generará todos los tamaños automáticamente.

Probando tu Favicon

Después de añadir el código:

  1. Actualiza forzadamente tu navegador (Ctrl+Shift+R o Cmd+Shift+R) — los favicons se almacenan en caché de forma intensiva.
  2. Abre en modo Incógnito/Privado para omitir la caché por completo.
  3. Verifica la prueba de resultados enriquecidos de Google para ver cómo aparece tu favicon en los resultados de búsqueda.
  4. Prueba en un iPhone/iPad real añadiéndolo a la pantalla de inicio.

Errores comunes a evitar