2012-07-25 62 views
46

Ésta es una pregunta muy básica, pero estoy tratando de cambiar el favicon de mi Node.js/expreso aplicación conNo se puede cambiar el Favicon con Express.js

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

y todavía estoy recibiendo la favicon predeterminado Esto está en mi función app.configure, y sí, he verificado que es a favicon.ico en el /public/images/favicon.ico. Tampoco hay nada sobre favicon.ico en la consola, lo que me lleva a pensar que se está ignorando esta línea de código. Todo lo demás en la función (establecer el puerto, establecer el directorio de vistas, configurar el motor de la plantilla, etc.) parece estar funcionando bien, entonces ¿por qué esta línea de código no se estaría ejecutando?

Lo que intenté

  • vaciar la caché del navegador
  • reinicio Terminal y funcionando de nuevo node app.js
  • { maxAge: 2592000000 } adición, tal como se describe here

Gracias de antemano.

Actualización: Lo tengo para trabajar. Ver mi respuesta a continuación para más información.

Respuesta

65

Intenté visitar el sitio en Safari por primera vez (normalmente uso Chrome) y noté que mostraba el favicon correcto. Intenté borrar mi caché en Chrome nuevamente (dos veces) sin éxito, pero después de más búsquedas, encontré que apparently favicons aren't stored in the cache. "Actualicé mi favicon" usando el método descrito here ¡y funcionó!

Aquí está el método (modificado desde el enlace anterior), en caso de que el enlace se agota:

  1. abierto Chrome/el navegador problemática
  2. Vaya al archivo favicon.ico directamente, por ejemplo, http://localhost:3000/favicon.ico
  3. actualizar la URL favicon.ico pulsando el botón de navegación apropiada Refresh (Actualizar) F5 o
  4. cerrar el navegador y abrir su sitio web - voila, el favicon se ha actualizado!
+6

No puedo creer que esto no esté en la documentación del módulo serve-favicon. Parece bastante importante, especialmente teniendo en cuenta que esta respuesta tiene 41 votaciones ascendentes. ¡Gracias por enlazar a estos recursos! – ariestav

+1

Aún no funciona para mí – Denny

+1

+1 para esto. ¡Funciona de maravilla! He estado presionando una semana entera. Cualquier forma de autorización de la memoria caché del navegador no funcionaría. – iamcastelli

0

¿Ha intentado borrar el caché de su navegador? Tal vez el viejo favicon todavía está en el caché.

33

Lo que funcionó para mí, finalmente:

Look que el

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

es al principio de la función de configuración de aplicaciones. Lo tuve antes al final. Como dice el documento Express: 'El orden de qué middleware está' definido 'usando app.use() es muy importante, se invocan secuencialmente, por lo tanto, esto define la precedencia del middleware'.

No necesité configurar maxAge.

Para probarlo:

  • Reiniciar el servidor con node app.js
  • Borrar la caché del navegador
  • refrescar el Favicon con acceso directo mediante el uso de "localhost: 3000 favicon/your_path_to_the/favicon.ico" y volver a cargar
+3

Con una nueva aplicación sin modificaciones, use esto: app.use (express.favicon ('public/images/favicon.ico')); – Shane

+0

Si está comenzando desde una plantilla, asegúrese de reemplazar cualquier instancia anterior de app.use (express.favicon()) ;. Encontré que cuando se duplicó no funcionó correctamente. –

+1

express.favicon ya no se usa con Express 4, ver error Error: la mayoría del middleware (como favicon) ya no se incluye con Express y debe instalarse por separado. Necesita https://github.com/expressjs/serve-favicon – Timo

0

Cómo hacer esto sin la expresa:

if (req.method == "GET") { 
    if (/favicon\.ico/.test(req.url)) { 
     fs.readFile("home/usr/path/favicon.ico", function(err, data) { 
      if (err) { 
       console.log(err); 
      } else { 
       res.setHeader("Content-Type","image/x-icon"); 
       res.end(data); 
      } 
    }); 
} 
15

La respuesta anterior ya no es válida.

Si utiliza

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

Usted obtendrá este error:

Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately 

Lo que vamos a tener que hacer es conseguir serve-favicon.

plazo

npm install serve-favicon --save 

a continuación, añadir esto a su aplicación

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

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

¡Esta debería ser la respuesta aceptada! "--save" significa incluir dependencias, mira aquí: http://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm-install – Timo

1

favicon sonriente para evitar errores:

var favicon = new Buffer('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 icono en el código de

crea un icono quizá aquí: http://www.favicon.cc/ o aquí: http://favicon-generator.org

convertirlo en base 64 tal vez aquí: http://base64converter.com/

vuelva a colocar la base de icono 64 valor

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

los iconos se hacen usando photoshop o inkscape, tal vez inkscape y photoshop para la corrección de la intensidad y el color (en el menú imagen-> ajustes).

para icono rápido ir a http://www.clker.com/ y elegir algunos vectores Clip Art, y descargar como svg. y luego colóquelo en inkscape y cambie colores o elimine partes, tal vez agregue algo de otra imagen prediseñada vectorial, luego para exportar, seleccione las partes para exportar y haga clic en archivo> exportar, elija tamaño 16x16 para favicon o 32x32, edite 128x128 o 256x256. El paquete ico puede tener varios tamaños de iconos dentro. puede tener junto con un icono de 16x16 pixel fav iconos de alta calidad para el enlace del sitio web.

entonces quizás mejore la imagen en photoshop. como la máscara de vibrance bivel redondo, cualquier cosa.

luego suba esta imagen a uno de los sitios web que generan favicons. también hay programas para Windows para editar íconos (buscar como "opensource editor de icono de ventana", figura cómo crear dos imágenes de diferentes tamaños dentro de un solo icono).

para agregar el favicon al sitio web. simplemente coloque el archivo favicon.ico como un archivo en la carpeta de archivos de su dominio raíz. por ejemplo, en nodejs 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.

2

Lo que funcionó para mí sigue. Establecer expreso para servir a sus recursos estáticos, como de costumbre, por ejemplo

app.use(express.static('public')); 

Put favicon dentro de la carpeta pública; A continuación, añadir una cadena de consulta a que el icono de URL, por ejemplo

<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)> 

En este caso, Chrome es el navegador mal comportamiento; ES DECIR. Firefox. Safari (todo en Windows) funcionó bien, SIN el truco anterior.

Cuestiones relacionadas