Impossibile modificare Favicon con Express.js

Question

Questa è una domanda veramente di base, ma sto cercando di cambiare la favicon del mio node.js/espresso app con

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

e sto ancora ricevendo il favicon predefinito. Questa è nella mia funzione app.configure, e sì, ho verificato che ci sia a favicon.ico nel /public/images/favicon.ico. Non c'è niente di uno favicon.ico nella console, che mi porta a credere che questa linea di codice venga ignorata. Tutto il resto della funzione (impostazione della porta, impostazione della directory delle viste, impostazione del motore di template ecc.) Sembra funzionare correttamente, quindi perché questa riga di codice non dovrebbe essere in esecuzione?

Quello che ho cercato

• svuotare la cache del browser
• Riavvio Terminal e correre di nuovo node app.js
• Aggiunta { maxAge: 2592000000 }, come descritto here

Grazie in anticipo.

Aggiornamento: L'ho fatto funzionare. Vedere la mia risposta qui sotto per ulteriori informazioni.

Answer 1

Ho provato a visitare il sito in Safari per la prima volta (di solito uso Chrome) e ho notato che stava mostrando la favicon corretta. Ho provato a svuotare di nuovo la cache in Chrome (due volte) senza alcun risultato, ma dopo ulteriori ricerche, ho trovato che apparently favicons aren't stored in the cache. Ho "rinfrescato la mia favicon" usando il metodo descritto here e ha funzionato!

Ecco il metodo (modificato dal link qui sopra), nel caso in cui il collegamento si esaurisce:

1. Apri Chrome/browser problematico
2. Individuare il file favicon.ico direttamente, per esempio http://localhost:3000/favicon.ico
3. Refresh l'URL favicon.ico premendo F5 o il pulsante appropriato del browser Refresh (Reload)
4. chiudere il browser e aprire il tuo sito web - voilà, il vostro favicon è stato aggiornato!

Answer 2

Hai provato a svuotare la cache del browser? Forse la vecchia favicon è ancora nella cache.

Answer 3

Quello che ha funzionato per me finalmente:

Guardate che il

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

è all'inizio della funzione di configurazione app. L'ho avuto prima alla fine. Come dice il documento Express: "L'ordine di quale middleware è" definito "usando app.use() è molto importante, vengono invocati in sequenza, quindi ciò definisce la precedenza del middleware."

Non ho bisogno di impostare alcun MAXAge.

Per provarlo:

• Riavviare il server con node app.js
• Cancellare la cache del browser
• Refresh la favicon con accesso direttamente esso utilizzando "localhost: 3000/your_path_to_the favicon/favicon.ico" e ricarico

Answer 4

Come fare questo senza espressa:

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); 
      } 
    }); 
} 

Answer 5

La risposta sopra non è più valida.

Se si utilizza

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

Otterrete questo errore:

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

cosa si sta andando ad avere bisogno di fare è ottenere serve-favicon.

corsa

npm install serve-favicon --save 

poi aggiungere questo per la vostra applicazione

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

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

Answer 6

favicon smiley per evitare l'errore:

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); 
}); 

per cambiare icona nel codice sopra

.210

fanno un'icona forse qui: http://www.favicon.cc/ o qui: http://favicon-generator.org

convertirlo in Base64 forse qui: http://base64converter.com/

quindi sostituire la base icona di 64 valore

informazioni di carattere generale come creare un'icona fav personalizzato

Le icone sono create utilizzando Photoshop o Inkscape, forse inkscape quindi Photoshop per la vividezza e la correzione del colore (nel menu immagine-> regolazioni).

per icona rapida goto http://www.clker.com/ e scegliere alcune ClipArt vettoriali e scaricare come svg. quindi portalo in inkscape e cambia i colori o elimina le parti, magari aggiungi qualcosa da un'altra immagine vettoriale clipart, quindi esporta le parti da esportare e fai clic su file> esporta, scegli dimensioni 16x16 per favicon o 32x32, per ulteriori modifiche 128x128 o 256x256. Il pacchetto ico può avere diverse dimensioni di icona all'interno. può avere insieme all'icona fav di 16x16 pixel un'icona di alta qualità per il collegamento al sito web.

quindi forse migliorare la foto in photoshop. come vibrance bivel round mask, qualsiasi cosa.

quindi caricare questa immagine in uno dei siti Web che generano favicon. ci sono anche programmi per windows per la modifica delle icone (cerca come "windows icon editor opensource", vedi come creare due immagini di dimensioni diverse all'interno di una singola icona).

per aggiungere la favicon al sito web. basta mettere il favicon.ico come file nella cartella dei file del dominio radice. ad esempio in nodejs in una cartella pubblica che contende i file statici. non deve essere nulla di speciale come il codice sopra solo un semplice file.

Answer 7

Ciò che ha funzionato per me segue. Impostare express per servire le risorse statiche come al solito, ad esempio

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

Inserire favicon nella cartella pubblica; Quindi aggiungi una stringa di query all'URL dell'icona, ad esempio

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

In questo caso, Chrome è il browser che agisce male; IE. Firefox. Safari (tutto su Windows) ha funzionato bene, SENZA il trucco di cui sopra.