Configurar un favicon en Express JS: guía práctica

Si tu aplicación Express muestra un icono de pestaña en blanco, puede que el archivo exista pero nunca se exponga públicamente o no esté enlazado en el head de la página. Esta guía de Express JS favicon utiliza static middleware y enlaces HTML estándar.

Requisitos previos

Prepara una imagen de marca cuadrada. Mzu favicondl puede crear un SVG, un ICO como fallback y un PNG opcional de Apple touch.

También necesitas:

• Una aplicación Express en funcionamiento.
• Acceso al layout HTML compartido o a public/index.html.
• El comando que inicia tu aplicación, como npm start.

Configuración del favicon en Express JS

1. Crea un directorio public

   Coloca los assets destinados al navegador en public, en la raíz del proyecto:

   my-app/
   ├─ public/
   │  ├─ favicon.svg
   │  ├─ favicon.ico
   │  ├─ apple-touch-icon.png
   │  └─ index.html
   └─ app.js

   Mantén los nombres de archivo exactamente como son, porque los servidores Linux distinguen entre mayúsculas y minúsculas.

2. Expón el directorio public

   Registra el static middleware antes que las rutas de la aplicación y cualquier controlador 404 catch-all:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(path.join(__dirname, 'public')));
   
   app.listen(3000, () => {
     console.log('Listening on http://localhost:3000');
   });

   Express ahora asigna public/favicon.svg a /favicon.svg y puede servir public/index.html en /. Una ruta situada antes del static middleware puede responder primero a la solicitud del icono.

3. Enlaza los iconos en el head del HTML

   Añade enlaces explícitos al layout compartido para que todas las rutas los reciban:

   <head>
     <link rel='icon' href='/favicon.svg' type='image/svg+xml'>
     <link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
     <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
   </head>

   El HTML Standard define rel='icon' como un enlace a un recurso externo, por lo que estas etiquetas indican a los navegadores una URL explícita para el icono.

4. Verifica los archivos y el HTML generado

   Reinicia el servidor y solicita los dos archivos:

   curl -I http://localhost:3000/favicon.svg
   curl -I http://localhost:3000/favicon.ico

   Ambas solicitudes deberían devolver HTTP 200. Confirma que el código fuente de la página contiene las mismas rutas; si los archivos responden pero la pestaña sigue mostrando un aspecto incorrecto, consulta la lista de resolución de problemas del favicon.

5. Publica las actualizaciones del icono de forma segura

   Cuando cambie el icono, actualiza la URL del HTML a href='/favicon.svg?v=2' e incrementa la versión en cada deployment. También puedes añadir un hash al nombre del archivo para evitar reutilizar la URL anterior; la guía de cache-busting explica los trade-offs.

Errores comunes en Express

• Directorio incorrecto: los archivos en src no son públicos a menos que express.static apunte a ese directorio.
• Orden incorrecto: una ruta catch-all situada antes de express.static puede bloquear las solicitudes del icono.
• Solo una página: coloca los enlaces en el layout de EJS, Pug o HTML, no en una sola ruta.
• Despliegue en un subpath: una ruta root-relative como /favicon.svg puede no encontrarse si la app está montada bajo un prefijo; construye las URL a partir del public base path.

Conclusión

Mantén alineados la ruta del asset, el middleware estático y los enlaces compartidos en el HTML. Así, todas las rutas de Express usarán el mismo favicon sin necesidad de un controlador dedicado para el icono.