Wie setze ich ein benutzerdefiniertes Favicon in Express?

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?

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.

Keine zusätzlichen Middlewares erforderlich. Benutz einfach:

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

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.

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">

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.

Wenn Sie Express> 4.0 verwenden, können Sie sich für Serve-Favicon entscheiden

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.

express-faviconMiddleware installieren :

npm install express-favicon --save

Verwenden Sie es so:

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

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.

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.

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.

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