configuracion-de-favicon

Configuración de Favicon

Cinco archivos y cinco etiquetas cubren todos los navegadores actuales, las pantallas de inicio de iOS y las instalaciones de Android. Más tamaños (mstile-*, browserconfig.xml, iconos de Apple de 57/72/114px, mask-icon) son heredados: omítelos.

1. El conjunto

Archivo	Tamaño	Usado por
favicon.svg	vector	Pestañas de navegadores modernos. Escala nítidamente y puede cambiar para modo oscuro.
favicon-96x96.png	96×96	Navegadores sin soporte SVG para favicon y resultados de búsqueda de Google.
favicon.ico	16, 32, 48 en un archivo	Navegadores heredados y herramientas que solicitan /favicon.ico directamente, sin leer HTML.
apple-touch-icon.png	180×180, opaco	Pantalla de inicio de iOS y iPadOS.
web-app-manifest-192x192.png, web-app-manifest-512x512.png	192, 512	Pantalla de inicio de Android, instalación PWA, pantalla de presentación.
site.webmanifest	—	Señala a Android los dos PNG anteriores.

2. Obtener los archivos

Desde un paquete de RealFaviconGenerator. Proporciona un conjunto de URLs de descarga. Descarga cada archivo en PUBLIC_FOLDER (ver paso 3) con su nombre exacto:

base=https://realfavicongenerator.net/files/<package-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
         web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
  curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "FALLÓ: $f"
done

Si una descarga falla, detente e infórmalo. No envíes un conjunto incompleto. Reporta errores del generador en https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml.

Desde un SVG fuente (necesita rsvg-convert e ImageMagick, o usa el generador):

cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96  -h 96  logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOS rellena la transparencia con negro: aplana sobre el fondo de la marca, con ~10% de relleno
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico

3. Encontrar PUBLIC_FOLDER

Es la carpeta servida en la raíz del sitio, de modo que PUBLIC_FOLDER/favicon.ico se cargue en /favicon.ico.

Stack	Carpeta
Vite, Next.js, Create React App, Astro, Remix, Nuxt 3	public/
SvelteKit	static/
Angular	public/ (v17+) o src/ con el archivo listado en los assets de angular.json
Hugo, Jekyll, Eleventy	static/, la raíz del sitio, o la carpeta de copia directa
HTML plano	Junto a index.html

Next.js App Router: elimina el app/favicon.ico predeterminado. Prevalece sobre public/favicon.ico y suele ser el logo de Next.js.

4. Añadir el marcado una vez

Coloca esto en el <head> del único archivo que renderiza la etiqueta <html> raíz. Nunca lo añadas por página.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Stack	Archivo raíz
Vite, CRA, HTML plano	index.html
Next.js App Router	app/layout.tsx, a través de la exportación metadata (abajo), no etiquetas raw
Next.js Pages Router	pages/_document.tsx dentro de <Head>
Astro	El layout base, por ejemplo src/layouts/Layout.astro
SvelteKit	src/app.html
Remix / React Router 7	Exportación links en app/root.tsx
Nuxt	app.head.link en nuxt.config.ts

Equivalente en Next.js App Router:

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    shortcut: "/favicon.ico",
    apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
  },
  manifest: "/site.webmanifest",
};

Antes de añadir el marcado, busca en el proyecto etiquetas existentes rel="icon", apple-touch-icon y manifest. Reemplázalas; no añadas un segundo conjunto. Si el sitio se sirve bajo una sub-ruta (base / basePath), antepone cada href.

5. Optimizar

• Modo oscuro SVG. Un logo oscuro desaparece en una barra de pestañas oscura. Añade una consulta de medios dentro del SVG:

  <style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style>
  

• Tamaños pequeños. A 16px, elimina detalles finos y texto. Usa la marca gráfica, no la marca textual.
• Peso SVG. Ejecuta npx svgo favicon.svg y mantén el archivo por debajo de aproximadamente 2 KB.
• Manifiesto. Completa name, short_name, theme_color y background_color. Haz que el icono de 512 sea maskable: mantén la marca dentro de la zona segura central del 80%, usa un fondo sólido, y establece "purpose": "maskable" en él. Si la marca no encaja en la zona segura, añade un icono maskable separado.

  {
    "name": "Mi App",
    "short_name": "App",
    "icons": [
      { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
      { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

• Caché. Los navegadores cachean los favicons fuertemente. Cuando reemplaces un icono, renombra los archivos o añade ?v=2 a cada href y a los valores src del manifiesto.

6. Verificar

1. Cada archivo devuelve 200 con el tipo correcto. Ejecuta esto contra el servidor de desarrollo:

   for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
            web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
     printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f"
   done
   

2. El HTML renderizado contiene exactamente un conjunto de etiquetas: curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"' imprime 5.
3. En DevTools, abre Application → Manifest: no muestra errores y ambos iconos se renderizan.
4. Abre una pestaña con recarga completa en modo claro y oscuro y verifica que el icono sea visible en ambos.
5. En una URL desplegada, ejecuta el verificador de RealFaviconGenerator (https://realfavicongenerator.net/favicon-checker).