Come impostare favicon personalizzato in Express?

136

Di recente ho iniziato a lavorare in Node.js e nel file app.js c'è questa riga:

app.use(express.favicon());

Ora, come posso impostare il mio favicon.ico personalizzato?

— Ilya Karnaukhov
fonte

3

Assicurati di cancellare correttamente la cache del browser, altrimenti potresti non vederlo cambiare

— vsync

L'uso di app.use(express.favicon())Express 4 dà: La maggior parte dei middleware (come favicon) non è più inclusa in Express e deve essere installata separatamente. Consulta github.com/senchalabs/connect#middleware . In alternativa, non puoi fornire favicon con: app.get('/favicon.ico', (req, res) => res.status(200)) Express js prevent GET /favicon.ico

— utente

239

In Express 4

Installa il middleware favicon e poi fai:

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

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

O meglio, usando il pathmodulo:

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

(nota che questa soluzione funzionerà anche con le app express 3)

In Express 3

Secondo l'API, .faviconaccetta un parametro location:

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

Il più delle volte, potresti volerlo (come suggerito da vsync):

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

O meglio ancora, usa il pathmodulo (come suggerito da Druska):

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

Perché favicon è meglio di statico

Secondo la descrizione del pacchetto :

Questo modulo memorizza nella cache l'icona in memoria per migliorare le prestazioni saltando l'accesso al disco.
Questo modulo fornisce una ETagbase al contenuto dell'icona, piuttosto che alle proprietà del file system.
Questo modulo servirà con il più compatibile Content-Type.

— Benjamin Gruenbaum
fonte

1

Grazie! Ti dispiacerebbe aprire un problema in modo che io possa dare un'occhiata lì? Spero solo la roba del percorso e cioè che path.join(__dirname, "public")risulta nelle stringhe concatenate senza un separatore? Più piccolo è il campione, più velocemente possiamo sistemarlo (quindi se puoi per favore solo la parte di join).

— Benjamin Gruenbaum,

Qual è il vantaggio di usare ancora un altro middleware (gestito da qualcuno che potrebbe non mantenerlo in futuro) invece del modo più semplicistico spiegato da Eduardo ?

— Luca,

3

@LucaM prima di tutto - bella domanda! serve-favicon è gestito da noi (la fondazione Node.js) e Doug (che mantiene express) - cioè è dalle stesse persone che scrivono e mantengono espresse se stesse. Puoi vedere il readme del perché, ma in sostanza: registrazione, memorizzazione nella cache, gestione ETag e correzione Content-Type. Puoi vedere cosa fa qui . Pensi che ci sia merito nel modificare questo nella risposta?

— Benjamin Gruenbaum,

1

Grazie Benjamin per aver chiarito le funzionalità fornite da favicon . Lo scriverei nella risposta accettata anche se non strettamente necessario.

— Luca M

36

Non sono richiesti middleware extra. Usa solo:

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

— Eduardo
fonte

1

Sì, questo dovrebbe essere sufficiente ed è la risposta corretta perché un middleware aggiuntivo per questo sembra eccessivo.

— jlstr

1

@jlstr è come 20 righe di codice, che tipo di overkill intendi))) Ed è un lato server, il numero di piccole dipendenze non ha importanza. E il menzionato middleware fornisce : 1) memorizzazione nella cache della memoria 2) impostazione corretta ETag 3) impostazione correttaContent-Type

— maxkoryukov

18

smiley favicon per prevenire errori:

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

per cambiare l'icona nel codice sopra

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

convertilo in base64 forse qui: http://base64converter.com/

quindi sostituire il valore dell'icona base 64

informazioni generali su come creare un'icona preferita personalizzata

le icone sono realizzate usando Photoshop o Inkscape, forse inkscape quindi Photoshop per la correzione di vibrazione e colore (nel menu immagine-> regolazioni).

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

quindi forse migliorare l'immagine in Photoshop. come la vibrazione, l'effetto smussato, la maschera rotonda, qualsiasi cosa.

quindi caricare questa immagine su uno dei siti Web che generano favicon. ci sono anche programmi per windows per la modifica di icone come https://sourceforge.net/projects/variicons/ .

per aggiungere la favicon al sito Web. basta inserire favicon.ico come file nella cartella principale del dominio. ad esempio in node.js nella cartella pubblica che contiene i file statici. non deve essere niente di speciale come il codice sopra un semplice file.

— Shimon Doodkin
fonte

1

Ti piace questo approccio al meglio. Ho appena usato un file per servire invece di base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);

— DaafVader,

2

Perché non usare semplicemente express.favicon dal momento che stai già usando express ?? Perché creare un intero percorso se è possibile utilizzare una cartella statica? Oltre a ciò, quella stringa magica (la tua faccina) non migliora il tuo caso.

— SubliemeSiem

1

Non hai bisogno di alcun codice per inserire favicon. Basta inserirlo come file nella directory dei file statici.

— Shimon Doodkin,

16

Non è necessario un middleware personalizzato ?! In espresso:

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

Quindi metti la tua favicon in pubblico e aggiungi la seguente riga nella testa del tuo html:

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

— DaafVader
fonte

1

Questo è DaafVader. Questo ha funzionato. La mia impostazione era: app.use (express.static ('public')). Ho salvato la mia favicon nella cartella img che è all'interno della cartella pubblica. Nel mio file html nella sezione head, ho usato <link rel = "icon" href = "/ img / favicon.ico"> dove favicon.ico era il mio nome file della mia favicon.

— Nhon Ha,

8

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

L'ho fatto funzionare localmente senza il __dirname +ma non riuscivo a farlo funzionare sul mio server distribuito.

— ThomasReggi
fonte

provareapp.use(express.favicon('./public/images/favicon.ico'));

— Alexis Diel il

5

Se si utilizza Express> 4.0, è possibile utilizzare serve-favicon

— Anastasios Andronidis
fonte

8

Perché dovremmo optare per serve-favicon?

— Nero,

4

Se hai impostato il percorso statico, usa semplicemente <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">nelle tue viste. Non c'è bisogno di nient'altro. Assicurati di avere la cartella delle immagini all'interno della cartella pubblica.

— Mohsin Khan
fonte

1

Assicurati solo di utilizzare 127.0.0.1invece di localhostGoogle Chrome durante lo sviluppo, per qualche motivo che mi ha risolto il problema.

— cprcrack,

1

Installa express-faviconmiddleware:

npm install express-favicon --save

Usalo in questo modo:

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

— ELIG
fonte

1

È necessario installare il middleware per servire la favicon.

Ho provato questo ora:

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

e ho ricevuto questo messaggio di errore:

Errore: la maggior parte dei middleware (come favicon) non è più inclusa in Express e deve essere installata separatamente. Si prega di consultare https://github.com/senchalabs/connect#middleware .

Penso che possiamo considerarlo definitivo.

— amunnelly
fonte

0

Il codice elencato di seguito funziona:

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

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

Assicurati di aggiornare il browser o cancellare la cache.

— blakeface
fonte

0

passaggio 0: aggiungi il codice seguente a app.js o index.js

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

passaggio 1: scarica l'icona da qui https://icons8.com/ o crea il tuo
passaggio 2: vai a https://www.favicongenerator.com/
passaggio 3 : carica il file icon.png scaricato> imposta 16px> crea favicon> scarica
passaggio 4: vai alla cartella download, troverai [file .ico], rinominalo come favicon.ico
passaggio 5: copia favicon.ico nella directory pubblica hai creato il
passaggio 6: aggiungi il codice seguente al tuo file .pug sotto il tag head, sotto il tag title

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

passaggio 7: salva> riavvia server> chiudi browser> riapri browser> appare favicon

NOTA: puoi usare un nome diverso da favicon,
ma assicurati di cambiare il nome nel codice e nella cartella pubblica.

— Mehran Ahemad
fonte

0

In app.js:

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

Supponendo che l'icona risieda in "/public/images/favicon.ico" aggiungi il prossimo link nella testa di html:

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

Questo ha funzionato bene in un progetto generato automaticamente con il comando:

express my-project

— Nikolas H
fonte

0

Se si desidera una soluzione che non coinvolga file esterni e che non utilizzi express.static(ad esempio un server Web e un sito a file super leggero), è possibile utilizzare serve-favicone codificare il favicon.icofile come Base64. Come questo:

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

Sostituisci IMAGE_AS_BASE64_STRING_GOES_HEREcon il risultato della codifica del tuo file favicon come Base64. Ci sono molti siti che possono farlo online, fare una ricerca.

Nota che potrebbe essere necessario riavviare il server e / o il browser per vederlo funzionare localhoste una cache del browser con aggiornamento rapido / chiaro per vederlo funzionare sul Web.

— jpw
fonte