Cómo crear un Favicon para tu sitio web — Guía completa

¿Qué es un favicon y por qué importa?

Un favicon (abreviatura de "favorite icon") es el pequeño icono que aparece en las pestañas del navegador, marcadores, listas de historial y resultados de búsqueda junto al nombre de tu sitio web. A pesar de su diminuto tamaño, un favicon juega un papel significativo en cómo los usuarios perciben e interactúan con tu sitio.

Piensa en cómo gestionas múltiples pestañas de navegador abiertas. Cuando tienes diez o más pestañas compitiendo por espacio, el favicon suele ser el único identificador visual que te ayuda a encontrar la página correcta. Sin uno, tu sitio muestra un icono de documento en blanco genérico, señal inmediata de que el sitio puede estar incompleto o no ser de confianza.

Los favicons contribuyen a tu sitio web de varias maneras importantes:

• Reconocimiento de marca — Un favicon coherente refuerza tu identidad de marca en cada navegador y dispositivo
• Experiencia de usuario — Los visitantes pueden localizar rápidamente tu pestaña entre docenas de páginas abiertas
• Profesionalismo — Un favicon ausente sugiere falta de atención al detalle
• Visibilidad en búsquedas — Google y otros motores muestran favicons en los resultados de búsqueda móviles
• Marcadores y pantallas de inicio — Cuando los usuarios guardan tu sitio, el favicon se convierte en el acceso directo visual que asocian con tu marca

En resumen, un favicon es uno de los activos más pequeños de tu sitio web, pero su ausencia se nota de inmediato.

Tamaños de favicon explicados

Uno de los puntos más confusos es qué tamaños necesitas realmente. Diferentes navegadores, sistemas operativos y dispositivos solicitan diferentes tamaños de icono.

16x16 — Pestaña del navegador (Legacy)

El tamaño de favicon original, aún utilizado en algunos navegadores más antiguos para los iconos de pestaña y la barra de direcciones.

32x32 — Pestaña del navegador (Estándar)

Este es el tamaño principal para pestañas de navegador de escritorio en 2026. Chrome, Firefox, Safari y Edge usan este tamaño para mostrar el icono de pestaña.

48x48 — Barra de tareas de Windows

Windows usa la variante 48x48 cuando un sitio web se fija a la barra de tareas o se muestra en mosaicos de acceso directo.

180x180 — Apple Touch Icon

Cuando un usuario de iOS agrega tu sitio web a su pantalla de inicio, Safari usa un PNG de 180x180 como icono de aplicación. Es fundamental para cualquier sitio con tráfico móvil.

192x192 — Android Chrome

Android Chrome usa un icono de 192x192 para la función "Añadir a pantalla de inicio" y los manifiestos de aplicaciones web progresivas (PWA).

512x512 — Pantalla de inicio de PWA

El icono de 512x512 se usa para pantallas de inicio PWA en dispositivos Android. Si estás construyendo una PWA, este tamaño es obligatorio para pasar las auditorías de Lighthouse.

Tabla de referencia rápida

Tamaño	Propósito	Formato	¿Requerido?
16x16	Pestañas legacy	ICO	Recomendado
32x32	Pestañas escritorio	ICO/PNG	Sí
48x48	Barra de tareas Windows	ICO/PNG	Recomendado
180x180	Apple Touch Icon	PNG	Sí
192x192	Pantalla inicio Android, PWA	PNG	Sí
512x512	Pantalla inicio PWA	PNG	Para PWAs

Formatos de favicon: ICO vs PNG vs SVG

ICO — El formato universal

El formato ICO ha sido el estándar desde que Microsoft introdujo los favicons en Internet Explorer 5. Un archivo ICO puede agrupar múltiples tamaños (16x16, 32x32, 48x48) en un solo archivo, siendo la opción más compatible.

PNG — El estándar moderno

Los favicons PNG ofrecen mejor compresión, soporte de transparencia y renderizado más nítido en tamaños específicos. La mayoría de los navegadores modernos (Chrome, Firefox, Edge, Safari 12+) soportan completamente los favicons PNG.

SVG — El futuro escalable

Los favicons SVG son vectoriales, lo que significa que un solo archivo se ve nítido en cualquier resolución. También soportan media queries CSS, permitiendo características como la adaptación automática al modo oscuro:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e0e0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold">T</text>
</svg>

¿Qué formato deberías usar?

El enfoque recomendado en 2026 es proporcionar los tres:

1. Un archivo ICO que contiene tamaños 16x16, 32x32 y 48x48 para máxima compatibilidad
2. Archivos PNG en 180x180 y 192x192 para dispositivos Apple y Android
3. Un archivo SVG para navegadores modernos que soporta modo oscuro

Cómo crear un favicon

Opción 1: Usar un generador de favicon en línea

La forma más rápida de crear un paquete de favicon completo es con una herramienta dedicada. Prueba nuestro Generador de Favicon gratuito — acepta cualquier imagen y produce automáticamente todos los tamaños y formatos que necesitas.

Opción 2: Diseñar desde cero en un editor gráfico

Si quieres control creativo total, comienza con un canvas de 512x512 en Figma, Adobe Illustrator o Inkscape.

1. Crea un nuevo tablero de 512x512
2. Diseña tu icono con la simplicidad en mente — los detalles finos se perderán a 16x16
3. Exporta versiones PNG a 512, 192, 180, 48, 32 y 16 píxeles
4. Convierte los tamaños más pequeños en un archivo ICO con una herramienta como ImageMagick

Generar un archivo ICO con ImageMagick

# Generar tamaños individuales desde una imagen fuente
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png

# Agruparlos en un solo archivo ICO
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

Código HTML para añadir favicons a tu sitio web

Una vez generados tus archivos de favicon, añade las siguientes etiquetas dentro de la sección <head> de tu HTML:

<head>
  <!-- Favicon estándar (ICO para soporte universal) -->
  <link rel="icon" href="/favicon.ico" sizes="48x48" />

  <!-- Favicon SVG para navegadores modernos con soporte modo oscuro -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Manifiesto de aplicación web para Android y PWAs -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Tu archivo site.webmanifest debe referenciar los iconos PNG más grandes:

{
  "name": "Tu Sitio Web",
  "short_name": "TuSitio",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Implementación específica por framework

Next.js (App Router):

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
  },
};

Mejores prácticas para 2026

Proporcionar múltiples formatos

No dependas de un solo archivo de favicon. Sirve ICO para navegadores legacy, PNG para Apple y Android, y SVG para navegadores modernos.

Soportar modo oscuro con SVG

Cada vez más usuarios navegan en modo oscuro. Un favicon SVG con una media query prefers-color-scheme adaptará automáticamente sus colores para coincidir con el tema del sistema del usuario.

Mantener el diseño simple

Tu favicon se renderizará tan pequeño como 16x16 píxeles. A ese tamaño, los degradados sutiles, las líneas finas y el texto pequeño son invisibles. Usa formas en negrita, colores de alto contraste y detalles mínimos.

Optimizar el tamaño del archivo

Los favicons se cargan en cada visita de página. Ejecuta tus archivos PNG a través de un optimizador como pngquant u optipng. Los archivos SVG deben limpiarse con svgo.

# Optimizar favicons PNG
pngquant --quality=65-80 favicon-192.png -o favicon-192.png
optipng -o7 favicon-32.png

# Optimizar favicon SVG
svgo favicon.svg -o favicon.svg

Usar un manifiesto de aplicación web

Incluso si no estás construyendo una PWA, un archivo site.webmanifest le indica a Android Chrome dónde encontrar tus iconos y define el color del tema de tu aplicación.

Errores comunes a evitar

Usar solo favicon.ico

Depender de un solo archivo ICO significa que tu icono se verá borroso en dispositivos Apple y Android de alta resolución. Siempre incluye archivos PNG dedicados en 180x180 y 192x192.

Ignorar el Apple Touch Icon

Si omites el apple-touch-icon, iOS tomará una captura de pantalla de tu página y la usará como icono de pantalla de inicio. El resultado es casi siempre una instantánea ilegible y ampliada de tu diseño.

Olvidar actualizar la caché tras cambios

Los navegadores almacenan en caché los favicons de forma agresiva. Cuando actualices tu icono, los usuarios pueden ver la versión antigua durante días o semanas. Añade un parámetro de versión para forzar una actualización:

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48" />

Complicar demasiado el diseño

Un logotipo de empresa detallado con un eslogan no se podrá escalar a 16 píxeles. Simplifica agresivamente. Muchas marcas exitosas usan una sola letra o marca abstracta como favicon en lugar de su logotipo completo.

Conclusión

Un favicon bien implementado es un pequeño detalle que refleja la calidad general de tu sitio web. Al proporcionar los tamaños, formatos y marcado HTML correctos, te aseguras de que tu marca esté representada de forma coherente en cada navegador, dispositivo y plataforma.

Para empezar rápidamente, usa nuestro Generador de Favicon gratuito para crear todos los archivos que necesitas desde una sola imagen fuente. Sube tu logotipo o diseño, descarga el paquete completo y añade las etiquetas HTML a tu sitio — todo el proceso lleva menos de un minuto.

Los puntos clave para 2026: sirve ICO, PNG y SVG juntos; soporta modo oscuro con una media query SVG; mantén tu diseño simple y en negrita; y siempre prueba tus favicons en dispositivos reales antes del lanzamiento.