Si alguna vez has visto a un cliente anclar tu aplicación web a la barra lateral de Microsoft Edge solo para que tu hermoso logo se convierta en una mancha pixelada, conoces el dolor. Puede que Edge funcione con el mismo motor Chromium que Google Chrome, pero tratar tu favicon for microsoft edge setup exactamente igual que en Chrome es un error de novato.

Edge tiene superficies de interfaz de usuario únicas. Impulsa agresivamente a los usuarios a 'Instalar el sitio como una aplicación' (anclándolo a la barra de tareas de Windows) y destaca enormemente la barra lateral de Edge. Si tu favicon no está optimizado para estos entornos específicos de Microsoft, tu marca se verá rota en Windows.

Mira a GitHub. Cuando anclas GitHub en Edge, no extrae un ICO genérico de 16x16. Extrae un icono enmascarable (maskable) de alta resolución definido en un web manifest, asegurando que el Octocat se vea nítido ya sea en una pestaña diminuta o en un mosaico masivo del menú Inicio de Windows. Vamos a arreglar tu configuración de Edge ahora mismo.

Requisitos previos

Necesitas una imagen maestra. Recomiendo un PNG de 512x512 con fondo transparente o, idealmente, un SVG. Si solo tienes un JPEG de tamaño extraño, pásalo primero por Mzu favicondl para obtener un PNG cuadrado y limpio.

Paso 1: La base de Chromium

Debido a que Edge es Chromium bajo el capó, respeta las etiquetas de enlace HTML estándar para las pestañas del navegador. Necesitas un SVG para el escalado moderno y un PNG de respaldo para las versiones más antiguas de Edge.

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>

Pon esto en tu <head>. Esto cubre la pestaña estándar del navegador y los resultados de búsqueda de Bing. (Sí, Bing usa la misma lógica de rastreo que Google para los favicons, pero es notoriamente exigente con el contraste).

Paso 2: El Web App Manifest de Edge (La salsa secreta)

Aquí es donde Edge diverge de los navegadores básicos. Edge quiere que tu sitio sea una Aplicación Web Progresiva (PWA). Cuando un usuario hace clic en 'Instalar aplicación' desde la barra de direcciones de Edge, Windows toma el control. Si no tienes un manifest, Windows adivina tu icono, y generalmente adivina mal.

Crea un archivo site.webmanifest en tu directorio raíz. Debes definir un icono de 192x192 y otro de 512x512. Crucialmente, incluye el propósito maskable. Edge usa esto para la barra lateral y la barra de tareas de Windows para asegurar que tu icono llene perfectamente los cuadrados redondeados a nivel del sistema operativo.

{
  "name": "Tu Increíble App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "display": "standalone"
}

Enlázalo en tu HTML: <link rel='manifest' href='/site.webmanifest'>. Si no estás seguro de cómo generar estos tamaños específicos, echa un vistazo a nuestra guía de favicon para web app manifest para profundizar en los requisitos de las PWA.

Paso 3: Optimización para la barra lateral de Edge

La barra lateral de Edge es un enfoque masivo para Microsoft en 2026. Los usuarios anclan versiones móviles de los sitios aquí. Cuando se ancla, Edge busca primero el Apple Touch Icon (irónico, lo sé), y luego recurre al manifest.

Para garantizar que tu logo se vea nítido en la barra lateral de Edge con tema oscuro, proporciona un PNG de 180x180 de alto contraste.

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

Asegúrate de que este icono tenga un fondo sólido. Los fondos transparentes en la barra lateral de Edge a menudo resultan en logos invisibles si el usuario está en modo oscuro.

Errores comunes con Edge

Tratar a Edge como una idea de último momento es dejar de lado la calidad. Configura tu SVG, prepara ese web manifest para la integración con Windows y asegúrate de que tu Apple Touch Icon esté listo para la barra lateral. Tus usuarios de Windows te lo agradecerán.