¿Alguna vez pegaste una sola etiqueta <link rel='icon'> en tu <head> y diste el trabajo por terminado? Yo lo hice durante años, hasta que me di cuenta de que el icono de mi sitio se veía borroso en iOS y desaparecía por completo en el cajón de aplicaciones de Android. El ecosistema de navegadores se ha fragmentado enormemente, y esa única línea de código ya no es suficiente.

Si observas cómo GitHub o Stripe manejan sus cabeceras, notarás que no le lanzan un simple archivo .ico al navegador. Utilizan un conjunto específico de etiquetas para adaptarse a diferentes sistemas operativos, preferencias de modo oscuro y resoluciones de dispositivos.

Vamos a saltarnos la lección de historia. Lo que necesitas son ejemplos de código HTML para favicon que realmente funcionen en 2026. Toma estos fragmentos, pégalos en tu proyecto y vuelve a programar las funcionalidades reales de tu app.

El enfoque Minimalista vs. El Realista

Puede que te sientas tentado a simplemente soltar un favicon.ico en tu directorio raíz y no escribir nada de HTML. Los navegadores lo buscarán automáticamente. Pero depender de este comportamiento implícito es una idea terrible. Te deja sin control sobre la caché, se rompe cuando mueves tu sitio a un subdirectorio y omite por completo las pantallas modernas de alta resolución.

En su lugar, usamos un enfoque dirigido. Servimos un SVG ligero a los navegadores modernos, un ICO heredado a los antiguos y PNGs específicos para los sistemas operativos móviles.

Ejemplos esenciales de código HTML para Favicon en 2026

1. La base moderna (SVG + Fallback)

Este es el mínimo absoluto que deberías estar usando hoy. Los favicons SVG son infinitamente escalables y no pesan prácticamente nada. Servimos el SVG primero, y luego proporcionamos un respaldo ICO para los navegadores que aún no se han actualizado.

<!-- Icono SVG Moderno -->
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<!-- Respaldo ICO Heredado -->
<link rel='icon' href='/favicon.ico' sizes='any'>

¿Notas el atributo sizes='any' en el archivo ICO? Es un truco crucial. Sin él, Chrome a veces elegirá el ICO de baja resolución sobre tu nítido SVG solo porque cree que sabe más. Forzar sizes='any' soluciona este error.

2. El Apple Touch Icon (iOS y iPadOS)

Los dispositivos Apple ignoran por completo las etiquetas estándar de favicon cuando un usuario guarda tu sitio en su pantalla de inicio. Quieren un PNG específico de alta resolución. Ya no necesitas la docena de tamaños diferentes que la gente solía recomendar en 2015. Una sola imagen de 180x180 píxeles se encarga de todo.

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

Asegúrate de que este PNG tenga un fondo sólido. iOS no soporta la transparencia en los iconos de la pantalla de inicio y rellenará cualquier área transparente con un feo cuadrado negro.

3. El Manifest de Android y PWA

Los dispositivos Android y las Aplicaciones Web Progresivas (PWAs) buscan un archivo web manifest para saber cómo mostrar el icono de tu aplicación. En lugar de enlazar múltiples PNGs en tu HTML, enlazas un solo archivo JSON.

<!-- Web App Manifest para Android -->
<link rel='manifest' href='/site.webmanifest'>

Dentro de ese archivo site.webmanifest, definirás tus iconos de 192x192 y 512x512. Si necesitas ayuda para estructurar ese JSON, revisa nuestra guía completa de iconos para sitios web.

4. Soporte para Modo Oscuro (El truco del SVG)

Si tu logo es negro, va a desaparecer cuando un usuario cambie su navegador al modo oscuro. Como estamos usando un SVG para nuestro icono principal, podemos incrustar consultas de medios CSS (media queries) directamente dentro del archivo de imagen. Tu HTML no cambia, pero tu código SVG se ve así:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d='...' />
</svg>

El fragmento definitivo de 'Copiar y Pegar'

Deja de armar rompecabezas. Aquí está el stack definitivo y probado en batalla para 2026. Cubre el 99% de los casos de uso con solo cuatro líneas de código.

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>

¿Qué pasa con los iconos de mosaico de Windows? ¿O las máscaras de pestañas fijadas de Safari? Bórralos. Microsoft desaprobó los iconos de mosaico hace años, y Apple finalmente adoptó los SVGs estándar para las pestañas de Safari. Menos código significa un análisis más rápido.

Errores comunes (Por qué tu código no funciona)

Escribir el HTML es fácil, pero generar archivos de imagen perfectamente dimensionados y optimizados es tedioso. Es exactamente por eso que construimos Mzu favicondl. Sube tu logo en alta resolución una vez, y generaremos los archivos exactos de SVG, ICO, PNGs y manifest que necesitas para que estos fragmentos de código funcionen sin problemas.