Cómo configurar favicon en Next.js: genera favicon.ico desde SVG

Un único favicon.ico basta para un lanzamiento básico. Pero si quieres un renderizado estable en pestañas del navegador, pantalla de inicio de iOS, instalaciones PWA y resultados de búsqueda de Google, deberías publicar un conjunto de iconos completo.

Esta guía sigue un proceso práctico: definir los iconos necesarios, generarlos desde SVG e integrarlos correctamente en Next.js.

Qué archivos de icono necesitas realmente

Una configuración mínima sólida incluye estos recursos:

favicon.ico (fallback de compatibilidad)
icon.svg o icon.png (navegadores modernos)
apple-icon.png (icono de pantalla de inicio de iOS)
manifest (metadatos de PWA)
icon-192.png (tamaño para manifest)
icon-512.png (tamaño para manifest)

Flujo de trabajo práctico: de SVG al conjunto de favicons

1. Empieza con un SVG que siga siendo legible a tamaños muy pequeños

Los favicons suelen renderizarse a 16x16 y 32x32. Optimiza la fuente en consecuencia:

Mantén la forma principal y elimina los detalles diminutos.
Usa alto contraste.
Evita trazos ultrafinos.

Previsualiza rápidamente en SVG Viewer.

2. Genera `favicon.ico`

Usa SVG to ICO:

Sube el SVG
Selecciona tamaños comunes (16/32/48/64)
Exporta un único archivo .ico

Aquí es donde una herramienta SVG realmente ayuda: convertir un SVG fuente en un set de favicon útil y rápido de generar.

3. Genera `icon-192.png` y `icon-512.png`

Usa SVG to PNG y exporta:

icon-192.png
icon-512.png

Si hace falta, exporta también un apple-icon.png dedicado (normalmente 180x180).

4. Opcional: optimiza antes de publicar

Pasa los recursos fuente por SVG Optimizer o SVG Minify para obtener archivos más limpios y ligeros.

Integración con Next.js App Router

Estructura recomendada:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

Ejemplo de app/manifest.ts:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Comprobaciones de favicon de Google que deberías hacer antes del lanzamiento

Esto es validación técnica de la implementación, no copywriting:

https://your-domain.com/favicon.ico devuelve 200
Las rutas de los iconos no están bloqueadas por robots.txt
El favicon es cuadrado y al menos de 8x8
Prefiere tamaños que sean múltiplos de 48
El HTML de la homepage incluye la declaración del icono (rel="icon")

Si todo esto está correcto, las actualizaciones del favicon en Google Search suelen aparecer tras un nuevo rastreo.

Si tu app usa TanStack Start (como este proyecto)

Usa los mismos recursos y declara los enlaces en el <head> raíz:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

¿Basta con `favicon.ico`?

Es suficiente para un lanzamiento básico, pero no para cobertura completa en todas las plataformas.

¿Por qué Google sigue mostrando mi favicon antiguo?

Normalmente se debe a retrasos de rastreo o caché. Comprueba primero que la URL sea accesible y luego espera al siguiente rastreo.

¿Debería elegir `icon.svg` o `favicon.ico`?

Lo habitual es conservar ambos: fallback en .ico y un svg/png moderno.

Cómo configurar favicon en Next.js: genera favicon.ico desde SVG