¿Cómo configurar favicon personalizado en Express?

Recientemente comencé a trabajar en Node.js y en el archivo app.js hay esta línea:

app.use(express.favicon());

Ahora, ¿cómo configuro mi propio favicon.ico personalizado?

En Express 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 pathmó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 Express 3

Según la API, .faviconacepta 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, use el pathmódulo (como sugirió Druska):

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

¿Por qué el favicon es mejor que el estático?

Según la descripción del paquete :

1. Este módulo almacena en caché el icono en la memoria para mejorar el rendimiento omitiendo el acceso al disco.
2. Este módulo proporciona una ETagfunción basada en el 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 middlewares adicionales. Solo usa:

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

smiley favicon 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 icono tal vez aquí: http://www.favicon.cc/ o aquí: http://favicon-generator.org

conviértalo a base64 tal vez aquí: http://base64converter.com/

luego reemplace el valor del icono base 64

información general sobre cómo crear un ícono favorito

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

para obtener un icono rápido, vaya a http://www.clker.com/ y elija Vector Clip Arts y descárguelo 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 16x16 para favicon o 32x32. para editar más 128x128 o 256x256. El paquete ico puede tener varios tamaños de iconos en su interior. Puede tener junto con favicon de 16x16 píxeles iconos de alta calidad para el enlace del sitio web.

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

luego suba esta imagen a 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 la carpeta pública que contiene los archivos estáticos. no tiene que ser nada especial como el código anterior, solo un archivo simple.

¿No necesitas middleware personalizado? En expreso:

 //you probably have something like this already    
app.use("/public", express.static('public')); 

Luego ponga su favicon en público y agregue la siguiente línea en la cabeza de su html:

<link rel="icon" href="/public/favicon.ico">

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

Lo tenía trabajando localmente sin el __dirname +pero no pude hacerlo funcionar en mi servidor desplegado.

Si está utilizando Express> 4.0, puede optar por serve-favicon

Si tiene configurada su ruta estática, simplemente use la <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">en sus vistas. No hay necesidad de nada más. Asegúrese de tener su carpeta de imágenes dentro de la carpeta pública.

Instalar express-faviconmiddleware:

npm install express-favicon --save

Úselo así:

const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));

Debe instalar middleware para servir el favicon.

Intenté esto justo ahora:

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

y recibí este mensaje de error:

Error: la mayoría del middleware (como favicon) ya no está incluido con Express y debe instalarse por separado. Consulte https://github.com/senchalabs/connect#middleware .

Creo que podemos tomar eso como definitivo.

El código listado a continuación funciona:

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

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

Solo asegúrese de actualizar su navegador o borrar su caché.

paso 0: agregue el siguiente código a app.js o index.js

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

paso 1: descargue el icono desde aquí https://icons8.com/ o cree su propio
paso 2: vaya a https://www.favicongenerator.com/
paso 3 : cargue el archivo icon.png descargado> configure 16px> cree favicon> descargue el
paso 4: vaya a la carpeta de descargas, encontrará [archivo .ico], renómbrelo como favicon.ico
paso 5: copie favicon.ico en el directorio público creó el
paso 6: agregue el código siguiente a su archivo .pug debajo de la etiqueta principal, debajo de la etiqueta del título

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

paso 7: guardar> reiniciar servidor> cerrar navegador> volver a abrir navegador> aparece favicon

NOTA: puede usar un nombre que no sea favicon,
            pero asegúrese de cambiar el nombre en el código y en la carpeta pública.

En app.js:

app.use(express.static(path.join(__dirname, 'public')));

Suponiendo que el icono reside en "/public/images/favicon.ico", agregue el siguiente enlace en la cabeza de html:

<link rel='icon' href='/images/favicon.ico' class='js-favicon'>

Esto funcionó bien en un proyecto generado automáticamente con el comando:

express my-project

Si desea una solución que no implique archivos externos y que no use express.static(por ejemplo, un servidor web y un sitio súper ligero de un archivo), puede usar serve-favicony codificar su favicon.icoarchivo como Base64. Me gusta esto:

const favicon = require('serve-favicon');
const imgBuffer = new Buffer.from('IMAGE_AS_BASE64_STRING_GOES_HERE', 'base64');
// assuming app is already defined
app.use(favicon(imgBuffer));

Reemplace IMAGE_AS_BASE64_STRING_GOES_HEREcon el resultado de codificar su archivo favicon como Base64. Hay muchos sitios que pueden hacer eso en línea, tener una búsqueda.

Tenga en cuenta que es posible que deba reiniciar el servidor y / o el navegador para ver que funciona localhost, y una memoria caché de actualización / borrado para ver que funciona en la web.