Wie setze ich ein benutzerdefiniertes Favicon in Express?


136

Ich habe vor kurzem angefangen, in Node.js zu arbeiten, und in der Datei app.js befindet sich folgende Zeile:

app.use(express.favicon());

Wie richte ich nun mein eigenes benutzerdefiniertes favicon.ico ein?


3

Die Verwendung app.use(express.favicon())von Express 4 bietet: Die meiste Middleware (wie Favicon) wird nicht mehr mit Express gebündelt und muss separat installiert werden. Weitere Informationen finden Sie unter github.com/senchalabs/connect#middleware . Alternativ können Sie kein Favicon app.get('/favicon.ico', (req, res) => res.status(200)) bereitstellen
Benutzer

Antworten:


239

In Express 4

Installieren Sie die Favicon-Middleware und führen Sie dann folgende Schritte aus:

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

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

Oder besser mit dem pathModul:

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

(Beachten Sie, dass diese Lösung auch in Express 3-Apps funktioniert.)

In Express 3

Akzeptiert laut API .faviconeinen Standortparameter:

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

Meistens möchten Sie dies möglicherweise (wie von vsync vorgeschlagen):

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

Oder noch besser, verwenden Sie das pathModul (wie von Druska vorgeschlagen):

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

Warum Favicon besser ist als statisch

Laut Paketbeschreibung :

  1. Dieses Modul speichert das Symbol im Speicher zwischen, um die Leistung durch Überspringen des Festplattenzugriffs zu verbessern.
  2. Dieses Modul bietet eine ETagbasierend auf dem Inhalt des Symbols und nicht auf Dateisystemeigenschaften.
  3. Dieses Modul wird mit den am besten kompatiblen dienen Content-Type.

1
Vielen Dank! Würde es Ihnen etwas ausmachen, eine Ausgabe zu eröffnen, damit ich dort einen Blick darauf werfen kann? Hoffentlich nur das Pfadmaterial und das path.join(__dirname, "public")führt dazu, dass die Zeichenfolgen ohne Trennzeichen verkettet werden? Je kleiner das Beispiel, desto schneller können wir das beheben (wenn Sie also bitte nur den Join-Teil können).
Benjamin Gruenbaum

Was ist der Vorteil, wenn Sie eine andere Middleware verwenden (die von jemandem gewartet wird, der sie in Zukunft möglicherweise nicht mehr wartet), anstatt die von Eduardo erläuterte semplikistischere Art und Weise ?
LucaM

3
@LucaM vor allem - gute Frage! Serve-Favicon wird von uns (der Node.js-Stiftung) und Doug (der Express pflegt) gepflegt - das heißt, es sind dieselben Leute, die Express selbst schreiben und pflegen. Sie können die Readme-Datei für das Warum sehen, aber im Grunde: Protokollieren, Zwischenspeichern, ETag-Behandlung und Korrigieren Content-Type. Sie können sehen , was es tut hier . Denken Sie, dass es sinnvoll ist, dies in der Antwort zu bearbeiten?
Benjamin Gruenbaum

1
Vielen Dank an Benjamin, dass er die Funktionen von favicon gelöscht hat . Ich würde das in die akzeptierte Antwort schreiben, obwohl es nicht unbedingt benötigt wird.
LucaM

36

Keine zusätzlichen Middlewares erforderlich. Benutz einfach:

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

1
Ja, das sollte ausreichen und es ist die richtige Antwort, da sich eine zusätzliche Middleware dafür wie ein Overkill anfühlt.
jlstr

1
@jlstr es ist wie 20 Codezeilen, was für ein Overkill meinst du)) Und es ist eine Serverseite, aber die Anzahl der kleinen Abhängigkeiten spielt keine Rolle. Und die erwähnte Middleware bietet : 1) Speicher-Caching 2) richtiges ETag einstellen 3) richtig einstellenContent-Type
maxkoryukov

18

Smiley-Favicon, um Fehler zu vermeiden:

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

um das Symbol im obigen Code zu ändern

Machen Sie vielleicht hier ein Symbol: http://www.favicon.cc/ oder hier: http://favicon-generator.org

konvertiere es vielleicht hier zu base64: http://base64converter.com/

Ersetzen Sie dann den Wert für die Symbolbasis 64

Allgemeine Informationen zum Erstellen eines personalisierten Lieblingssymbols

Symbole werden mit Photoshop oder Inkscape erstellt, möglicherweise mit Inkscape und dann mit Photoshop zur Vibrations- und Farbkorrektur (im Menü Bild-> Einstellungen).

Für ein schnelles Symbol gehen Sie zu http://www.clker.com/ und wählen Sie einige Vektor-Cliparts aus und laden Sie sie als SVG herunter. Bringen Sie es dann zu inkscape ( https://inkscape.org/ ) und ändern Sie die Farben oder löschen Sie Teile. Fügen Sie möglicherweise etwas aus einem anderen Vektor-Clipart-Bild hinzu. Wählen Sie zum Exportieren die zu exportierenden Teile aus und klicken Sie auf Datei> Exportieren. Wählen Sie eine Größe wie 16 x 16 für Favicon oder 32x32. für weitere Bearbeitung 128x128 oder 256x256. Das ico-Paket kann mehrere Symbolgrößen enthalten. Es kann zusammen mit 16x16 Pixel Favicon eine hochwertige Symbole für den Link für die Website haben.

Dann verbessern Sie vielleicht das Bild in Photoshop. wie Vibration, Abschrägungseffekt, runde Maske, alles.

Laden Sie dieses Bild dann auf eine der Websites hoch, die Favoriten generieren. Es gibt auch Programme für Windows zum Bearbeiten von Symbolen wie https://sourceforge.net/projects/variicons/ .

um das Favicon zur Website hinzuzufügen. Legen Sie einfach die Datei favicon.ico als Datei im Stammordner der Domäne ab. Zum Beispiel in node.js in einem öffentlichen Ordner, der die statischen Dateien enthält. Es muss nichts Besonderes sein, wie Code über einer einfachen Datei.


1
Wie dieser Ansatz am besten. Ich habe nur eine Datei anstelle von base64 verwendet: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader

2
Warum nicht einfach express.favicon verwenden, da Sie bereits Express verwenden? Warum eine ganze Route erstellen, wenn Sie genauso gut einen statischen Ordner verwenden können? Abgesehen davon macht diese magische Schnur (Ihr Smiley) Ihren Fall nicht besser.
SubliemeSiem

1
Sie benötigen keinen Code, um Favicon zu platzieren. Legen Sie es einfach als Datei im Verzeichnis der statischen Dateien ab.
Shimon Doodkin

16

Keine Notwendigkeit für benutzerdefinierte Middleware?! Im Express:

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

Stellen Sie dann Ihr Favicon öffentlich und fügen Sie die folgende Zeile in den Kopf Ihres HTML-Codes ein:

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

1
Das ist DaafVader. Das hat funktioniert. Meine Einstellung war: app.use (express.static ('public')). Ich habe mein Favicon in einem Ordner gespeichert, der sich im öffentlichen Ordner befindet. In meiner HTML-Datei im Kopfbereich habe ich <link rel = "icon" href = "/ img / favicon.ico"> verwendet, wobei favicon.ico mein Dateiname meines Favicons war.
Nhon Ha

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

Ich hatte es lokal ohne das __dirname +, konnte es aber auf meinem bereitgestellten Server nicht zum Laufen bringen.


versuchenapp.use(express.favicon('./public/images/favicon.ico'));
Alexis Diel


4

Wenn Sie einen statischen Pfad festgelegt haben, verwenden Sie einfach den <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">in Ihren Ansichten. Keine Notwendigkeit für etwas anderes. Bitte stellen Sie sicher, dass sich Ihr Bilderordner im öffentlichen Ordner befindet.


1
Stellen Sie einfach sicher, dass Sie während der Entwicklung 127.0.0.1anstelle von localhostGoogle Chrome verwenden, aus irgendeinem Grund, der dies für mich behoben hat.
cprcrack

1

express-faviconMiddleware installieren :

npm install express-favicon --save

Verwenden Sie es so:

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

1

Sie müssen Middleware installieren, um das Favicon zu bedienen.

Ich habe es gerade versucht:

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

und habe diese Fehlermeldung zurückbekommen:

Fehler: Die meiste Middleware (wie Favicon) wird nicht mehr mit Express gebündelt und muss separat installiert werden. Weitere Informationen finden Sie unter https://github.com/senchalabs/connect#middleware .

Ich denke, wir können das als endgültig ansehen.


0

Der unten aufgeführte Code funktioniert:

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

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

Stellen Sie einfach sicher, dass Sie Ihren Browser aktualisieren oder Ihren Cache leeren.


0

Schritt 0: Fügen Sie den folgenden Code zu app.js oder index.js hinzu.

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

Schritt 1: Laden Sie das Symbol von hier herunter: https://icons8.com/ oder erstellen Sie Ihren eigenen
Schritt 2: Gehen Sie zu https://www.favicongenerator.com/
Schritt 3 : Laden Sie die heruntergeladene Datei icon.png hoch> stellen Sie 16px ein> erstellen Sie ein Favicon> laden Sie
Schritt 4 herunter : Gehen Sie zum Download-Ordner. Sie finden [.ico-Datei] und benennen Sie sie in favicon.ico um.
Schritt 5: Kopieren Sie favicon.ico in ein öffentliches Verzeichnis Sie haben
Schritt 6 erstellt: Fügen Sie der .pug-Datei unter dem Head-Tag unter dem Title-Tag den folgenden Code hinzu

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

Schritt 7: Speichern> Server neu starten> Browser schließen> Browser erneut öffnen> Favicon wird angezeigt

HINWEIS: Sie können einen anderen Namen als Favicon verwenden,
            aber stellen Sie sicher, dass Sie den Namen im Code und im öffentlichen Ordner ändern.


0

In app.js:

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

Angenommen, das Symbol befindet sich in "/public/images/favicon.ico", fügen Sie den nächsten Link in den Kopf von HTML ein:

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

Dies funktionierte gut in einem Projekt, das automatisch mit dem folgenden Befehl generiert wurde:

express my-project
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.