javascript - Hvordan sette tilpasset favicon i Express?

Jeg begynte nylig å jobbe med Node.js, og i app.js-filen er det denne linjen:

app.use(express.favicon());

Nå, hvordan setter jeg opp min egen tilpassede favicon.ico?

Svar #1

I Express 4

Installer favicon-mellomvaren og gjør deretter:

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

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

Eller bedre, ved å bruke path-modulen:

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

(merk at denne løsningen også vil fungere i Express 3-apper)

I Express 3

Ifølge API-en aksepterer .favicon en stedparameter:

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

Som oftest vil du kanskje ha dette (som vsync foreslo):

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

Eller enda bedre, bruk path-modulen (som Druska foreslo):

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

Hvorfor favicon er bedre enn static

I følge pakningsbeskrivelsen:

  1. Denne modulen cacher ikonet i minnet for å forbedre ytelsen ved å hoppe over disktilgang.
  2. Denne modulen gir en ETag basert på innholdet i ikonet, i stedet for filsystemegenskaper.
  3. Denne modulen vil fungere med den mest kompatible Content-Type.

Svar #2

Ingen ekstra mellomvare kreves. Bare bruk:

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

Svar #3

Trenger ikke tilpasset middleware?! I Express:

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

Deretter plasserer du faviconen din i public og legger til følgende linje i html-hodet ditt:

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

Svar #4

smiley-favicon for å forhindre feil:

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

endre ikon i koden ovenfor

lag et ikon kanskje her: http://www.favicon.cc/ eller her: http://favicon-generator.org

konverter det til base64 kanskje her: http://base64converter.com/

erstatte deretter ikonets base 64-verdi

generell informasjon om hvordan lage et personlig favorittikon

Ikoner lages ved å bruke Photoshop eller Inkscape, kanskje Inkscape først og deretter Photoshop for vibrans og fargekorrigering (i bilde->justeringer-menyen).

for rask ikon gå til http://www.clker.com/ og velg noen vektor cliparts, og last ned som svg. ta det deretter med til Inkscape (https://inkscape.org/) og endre farger eller slett deler, kanskje legg til noe fra et annet vektor clipart-bilde, deretter for å eksportere velg delene som skal eksporteres og klikk fil>eksporter, velg størrelse som 16x16 for favicon eller 32x32. for videre redigering 128x128 eller 256x256. ico-pakken kan ha flere ikonstørrelser inne. den kan ha sammen med 16x16 piksel-favicon et høyoppløselig ikon for lenke til nettstedet.

så kanskje forbedre bildet i Photoshop. som vibrance, skråkant-effekt, rund maske, hva som helst.

last opp dette bildet til en av nettsidene som lager faviconer. Det finnes også programmer for Windows for å redigere ikoner, som https://sourceforge.net/projects/variicons/ .

å legge til favicon på nettstedet. Bare legg favicon.ico som en fil i rotmappen til domenet. For eksempel i Node.js i public-mappen som inneholder de statiske filene. Det trenger ikke å være noe spesielt som kode ovenfor, bare en enkel fil.

Relaterte artikler