Cómo añadir un favicon en HTML
Tres etiquetas cubren la mayoría de los sitios; cinco etiquetas le brindan una configuración de grado PWA. Este tutorial explica cada atributo, muestra fragmentos de copiar y pegar para pilas comunes, responde preguntas frecuentes y soluciona los problemas de almacenamiento en caché que hacen que los íconos parezcan atascados.
La etiqueta mínima
La declaración válida más pequeña es una sola línea en <head>:
<link rel="icon" href="/favicon.ico">
Los navegadores tratan rel="icon" como una pista para buscar esa URL para mostrar la pestaña. Las rutas relativas a la raíz que comienzan con / sobreviven independientemente de la ruta de la página actual.
Incluso con esta etiqueta, muchos clientes siguen probando /favicon.ico automáticamente. Mantenga el archivo en la raíz del sitio para solicitudes implícitas. Utilice nuestro [generador favicon](herramienta:generador favicon), [convertidor PNG a ICO](herramienta:png-to-ico), [convertidor SVG a ICO](herramienta:svg-to-ico) y [probador favicon en vivo](utilidad:favicon-tester) para crear y verificar su conjunto de iconos, y lea el [complementario guía](guía:how-to-add-favicon-html) para ver un tutorial condensado.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
El conjunto moderno recomendado.
Para una representación nítida en el escritorio, iOS y las pestañas del modo oscuro, utilice:
<enlace rel="icon" href="/favicon.ico" tamaños="cualquiera">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
El orden importa menos que la integridad. Los navegadores eligen el mejor tipo compatible: SVG cuando esté disponible; de lo contrario, un marco PNG o ICO coincidente.
Agregue type="image/svg+xml" en la línea SVG para que el rastreo MIME nunca etiquete mal el archivo.
Mensajes de instalación PWA
Vincula tu manifiesto: <link rel="manifest" href="/site.webmanifest">.
Dentro de site.webmanifest, declare íconos con src, tamaños, tipo y propósito. Las entradas mínimas útiles son archivos PNG de 192×192 y 512×512.
Pulido de tema opcional: <meta name="theme-color" content="#0f172a"> alinea la barra de estado Android con su marca durante los flujos de instalación.
Ejemplos de copiar y pegar
Sitio HTML simple: pegue dentro de <head>:
<enlace rel="icon" href="/favicon.ico" tamaños="cualquiera">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js App Router: agregue las mismas líneas a app/layout.tsx dentro de los metadatos o en un bloque <head> manual. Los archivos viven en /public.
Create React App: coloca iconos en /public y edita public/index.html. CRA sirve /public en la raíz del dominio en compilaciones de producción.
Comprender cada atributo
rel="icon" marca un candidato favicon. rel="apple-touch-icon" es el icono de la pantalla de inicio específico de iOS. rel="manifest" apunta a JSON con metadatos PWA.
tamaños le dice al navegador qué resolución representa PNG. Es necesario para los iconos PNG cuando declaras varios tamaños explícitamente.
href debe ser accesible en producción. Evite realizar enlaces directos a CDN de terceros para favicon; desea tener control total durante un cambio de marca.
Preguntas frecuentes
¿Puedo usar URL absolutas en href? Sí, pero /favicon.ico relativo a la raíz es más simple en los dominios de preparación y producción.
¿Necesito tanto rel="icono de acceso directo" como rel="icono"? No. rel="icon" es estándar; El atajo está obsoleto.
¿Dónde está exactamente <head>? Hijo directo de <html>, antes de <body>. Algunos marcos lo inyectan a través de componentes de diseño.
¿Deberían los favicon vivir en una CDN? Pueden, pero actualizan todas las URL <link> juntas al migrar. Las rutas relativas a la raíz evitan ese problema.
Solución de problemas
El ícono funciona en la página de inicio pero no en /blog/slug: usaste un href relativo como favicon.ico sin barra diagonal inicial. Utilice /favicon.ico en su lugar.
Safari muestra el ícono antiguo: borre los datos del sitio web o cambie el nombre del archivo una vez. Safari almacena en caché favicon más largos que HTML.
HTML válido pero 404 en la pestaña Red: archivo no implementado en la raíz del servidor o mayúsculas de minúsculas incorrectas (Favicon.ico vs favicon.ico en Linux).
SVG ignorado: falta type="image/svg+xml" o el servidor publica un tipo de contenido incorrecto. Repare el mapeo MIME en nginx o Apache.
Ubicación específica del marco
Vite / Vue / React SPA: coloque íconos en /public y haga referencia a /favicon.ico en index.html. El servidor de desarrollo y la compilación de producción sirven /public en la raíz del dominio.
Next.js App Router: agregue íconos a /app a través de la API de metadatos o coloque archivos estáticos en /public. Evite duplicar etiquetas en ambos lugares.
Nuxt: utilice /public o configure app.head.link en nuxt.config.ts para la gestión centralizada de etiquetas en todas las rutas.
SvelteKit: los activos estáticos en la carpeta estática/ se asignan a /. Actualice app.html <head> una vez para toda la aplicación.
Astro: public/directory más un componente Head compartido en su diseño garantiza que cada página incluya etiquetas de iconos idénticas sin tener que copiar y pegar.
Es posible que WordPress y otros usuarios de CMS no necesiten etiquetas manuales; consulte nuestro tutorial WordPress si el núcleo genera el marcado Site Icon para usted.
Validando su configuración HTML
Vea la fuente de la página en producción, no en el host local, para confirmar que HTML implementado coincida con su repositorio. Las canalizaciones de CI a veces inyectan diferentes diseños por entorno.
Utilice curl para recuperar la URL de cada icono devuelta en <link href>. Un estado 200 con Content-Length correcto significa que la ruta es real, no simplemente declarada.
La validación del marcado W3C es opcional para favicon, pero el anidamiento no válido de <head> (etiquetas dentro de <body>) puede hacer que los navegadores ignoren sus íconos por completo.
Ejecute la auditoría Lighthouse PWA si las instalaciones son importantes: indica que faltan íconos de manifiesto incluso cuando las pestañas se ven bien.
Marque la página, cierre el navegador por completo, vuelva a abrirlo y confirme que la barra de marcadores aún muestra su marca. Eso prueba el comportamiento persistente de la caché favicon.
Encabezados de seguridad y rutas de iconos
Content-Security-Policy default-src no bloquea las cargas favicon del mismo origen. Las URL de iconos de origen cruzado necesitan permisos explícitos para img-src o default-src.
La integridad de los subrecursos rara vez se aplica a los favicon. El alojamiento del mismo origen sigue siendo el valor predeterminado seguro más simple.
Si los íconos se encuentran en un subdominio CDN, use URL https:// absolutas en href y asegúrese de que CORS sea irrelevante: los favicon se cargan como imágenes, no se recuperan.
Datos a evitar: URI favicon en producción HTML. Inflan el caché HTML, omiten el almacenamiento en caché CDN y complican el CSP.
Orden de etiquetas y duplicados
Etiquetas rel=icon duplicadas con los mismos bytes de desperdicio href pero rara vez interrumpen la representación. Los hrefs duplicados y en conflicto confunden la depuración: elimine las etiquetas obsoletas.
Algunos temas WordPress imprimen etiquetas Site Icon mientras que los complementos agregan otro conjunto. Utilice Ver código fuente para detectar duplicados después de la instalación del complemento.
Coloque enlaces de iconos antes de grandes bloques de script en el encabezado. El descubrimiento temprano ayuda a pintar primero, aunque los íconos sean descargas de baja prioridad.
HTML5 no requiere barras de cierre en elementos vacíos. Tanto <link ...> como <link ... /> validan.
Casos heredados y extremos
Los comentarios condicionales de IE están muertos. No incluya etiquetas de iconos para navegadores obsoletos.
La etiqueta base en la cabeza cambia la resolución href relativa. Las rutas de iconos que comienzan con / son inmunes; favicon.ico relativo se rompe en rutas anidadas cuando se establece la base.
Shadow DOM y los componentes web no heredan la página favicon en las raíces ocultas; el ícono a nivel de documento aún se aplica a la pestaña.
Las incrustaciones de iframe muestran el documento incrustado favicon, no el documento principal. Cada cuadro necesita sus propias etiquetas si controlas ambos.
Es posible que la prueba del archivo local:// no resuelva /favicon.ico. Utilice un servidor de desarrollo local para obtener un comportamiento realista de los iconos.
Los marcadores y las extensiones del navegador no pueden cambiar su sitio favicon para otros usuarios, solo su Chrome local. Envíe etiquetas correctas del lado del servidor.