¿Cómo configurar favicon personalizado en Express?

Hemos estado indagado en el mundo online para así regalarte la solución para tu duda, si continúas con alguna inquietud puedes dejar la inquietud y te contestaremos sin falta.

Solución:

En expreso 4

Instale el middleware favicon y luego haga:

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

O mejor, usando el path módulo:

app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));

(tenga en cuenta que esta solución también funcionará en las aplicaciones express 3)

En Expreso 3

Según la API, .favicon acepta un parámetro de ubicación:

app.use(express.favicon("public/images/favicon.ico")); 

La mayoría de las veces, es posible que desee esto (como sugirió vsync):

app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

O mejor aún, usa el path módulo (como sugirió Druska):

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico'))); 

Por qué favicon es mejor que static

Según la descripción del paquete:

1. Este módulo almacena en caché el icono en la memoria para mejorar el rendimiento al omitir el acceso al disco.
2. Este módulo proporciona una ETag en función del contenido del icono, en lugar de las propiedades del sistema de archivos.
3. Este módulo servirá con los más compatibles Content-Type.

No se requieren middleware adicionales. Solo usa:

app.use('/favicon.ico', express.static('images/favicon.ico'));

favicon sonriente para evitar errores:

 //const fs = require('fs'); 
 //const favicon = fs.readFileSync(__dirname+'/public/favicon.ico'); // read file
 const favicon = new Buffer.from('AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAAAAAEAAAEAAAAAEAAAABAAAAEAAAAAAQAAAQAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAEAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD8HwAA++8AAPf3AADv+wAA7/sAAP//AAD//wAA+98AAP//AAD//wAA//8AAP//AAD//wAA', 'base64'); 
 app.get("/favicon.ico", function(req, res) 
  res.statusCode = 200;
  res.setHeader('Content-Length', favicon.length);
  res.setHeader('Content-Type', 'image/x-icon');
  res.setHeader("Cache-Control", "public, max-age=2592000");                // expiers after a month
  res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
  res.end(favicon);
 );

para cambiar el icono en el código de arriba

haga un ícono tal vez aquí: http://www.favicon.cc/ o aquí: http://favicon-generator.org

convertirlo a base64 tal vez aquí: http://base64converter.com/

luego reemplace el valor del icono base 64

información general sobre cómo crear un icono favorito personalizado

Los íconos se hacen usando Photoshop o Inkscape, tal vez Inkscape y luego Photoshop para la corrección de color y vibración (en el menú de imagen->ajustes).

para obtener un ícono rápido, vaya a http://www.clker.com/ y elija algunas imágenes prediseñadas vectoriales y descárguelas como svg. luego llévelo a Inkscape (https://inkscape.org/) y cambie los colores o elimine partes, tal vez agregue algo de otra imagen de clipart vectorial, luego, para exportar, seleccione las partes para exportar y haga clic en archivo> exportar, elija un tamaño como 16×16 para favicon o 32×32. para editar más 128×128 o 256×256. El paquete ico puede tener varios tamaños de iconos en su interior. puede tener, junto con un favicon de 16×16 píxeles, iconos de alta calidad para el enlace del sitio web.

entonces tal vez mejore la imagen en Photoshop. como vibración, efecto de bisel, máscara redonda, cualquier cosa.

luego cargue esta imagen en uno de los sitios web que generan favicons. también hay programas para Windows para editar íconos como https://sourceforge.net/projects/variicons/ .

para agregar el favicon al sitio web. simplemente coloque el favicon.ico como un archivo en la carpeta raíz del dominio. por ejemplo, en node.js en una carpeta pública que contiene el static archivos no tiene que ser nada especial como el código anterior, solo un archivo simple.

Nos puedes auxiliar nuestro quehacer ejecutando un comentario o puntuándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador