¿Cómo configurar favicon personalizado en Express?

136

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?

Ilya Karnaukhov
fuente
3
Asegúrese de borrar correctamente la memoria caché del navegador, de lo contrario es posible que no vea que cambia
vsync
El uso app.use(express.favicon())en Express 4 proporciona: La mayoría del middleware (como favicon) ya no está incluido con Express y debe instalarse por separado. Consulte github.com/senchalabs/connect#middleware . Alternativamente, no puede proporcionar ningún favicon con: app.get('/favicon.ico', (req, res) => res.status(200)) Express js prevent GET /favicon.ico
usuario

Respuestas:

239

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.
Benjamin Gruenbaum
fuente
1
¡Gracias! ¿Te importaría abrir un problema para que pueda echar un vistazo allí? Con suerte, ¿solo el camino y, a saber, eso path.join(__dirname, "public")da como resultado que las cadenas se concatenen sin un separador? Cuanto más pequeña sea la muestra, más rápido podremos arreglar esto (así que si puedes, por favor solo la parte de unión).
Benjamin Gruenbaum
¿Cuál es el beneficio de usar otro middleware (mantenido por alguien que podría no mantenerlo en el futuro) en lugar de la forma más semplicista explicada por Eduardo ?
LucaM
3
@LucaM en primer lugar, ¡buena pregunta! serve-favicon es mantenido por nosotros (la fundación Node.js) y Doug (que mantiene express), es decir, es por las mismas personas que escriben y mantienen express. Puede ver el archivo Léame de por qué, pero básicamente: registro, almacenamiento en caché, manejo de ETag y corrección Content-Type. Puedes ver lo que hace aquí . ¿Crees que hay mérito en editar esto en la respuesta?
Benjamin Gruenbaum
1
Gracias Benjamin por aclarar las características que proporciona favicon . Escribiría eso en la respuesta aceptada aunque no sea estrictamente necesario.
LucaM
36

No se requieren middlewares adicionales. Solo usa:

app.use('/favicon.ico', express.static('images/favicon.ico'));
Eduardo
fuente
1
Sí, esto debería ser suficiente y es la respuesta correcta porque un middleware adicional para esto parece excesivo.
jlstr
1
@jlstr es como 20 líneas de código, ¿qué tipo de exageración quieres decir?) Y es un lado del servidor, por lo que el número de pequeñas dependencias no importa. Y el middleware mencionado proporciona : 1) almacenamiento en memoria caché 2) establecer ETag apropiado 3) establecer correctoContent-Type
maxkoryukov
18

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.

Shimon Doodkin
fuente
1
Como este enfoque, el mejor. Acabo de usar un archivo para servir en lugar de base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader
2
¿Por qué no usar express.favicon ya que ya usas express? ¿Por qué crear una ruta completa si también puedes usar una carpeta estática? Además de eso, esa cuerda mágica (tu carita sonriente) no está mejorando tu caso.
SubliemeSiem
1
No necesitas ningún código para poner favicon. Simplemente póngalo como archivo en el directorio de archivos estáticos.
Shimon Doodkin
16

¿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">
DaafVader
fuente
1
Eso es DaafVader. Esto funcionó. Mi configuración fue: app.use (express.static ('public')). Guarde mi favicon en la carpeta img que está dentro de la carpeta pública. En mi archivo html en la sección de cabecera, utilicé <link rel = "icon" href = "/ img / favicon.ico"> donde favicon.ico era el nombre de archivo de mi favicon.
Nhon Ha
8
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.

ThomasReggi
fuente
probarapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel
5

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

Anastasios Andronidis
fuente
8
¿Por qué deberíamos ir a servir-favicon?
Negro
4

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.

Mohsin Khan
fuente
1
Solo asegúrate de estar usando en 127.0.0.1lugar de localhosten Google Chrome mientras desarrollas, por alguna razón eso me solucionó.
cprcrack
1

Instalar express-faviconmiddleware:

npm install express-favicon --save

Úselo así:

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

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.

amunnelly
fuente
0

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é.

blakeface
fuente
0

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.

Mehran Ahemad
fuente
0

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
Nikolas H
fuente
0

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.

jpw
fuente