Wie stelle ich ein benutzerdefiniertes Favicon in Express ein?

Question 1

Ich habe vor kurzem angefangen, in Node.js zu arbeiten, und in der Datei app.js gibt es diese Zeile:

app.use(express.favicon());

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

Question 2

Im Express4

Installiere das Favicon-Middleware und dann mach:

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

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

Oder besser, mit der path Modul:

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

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

Im Express3

Laut API, .favicon akzeptiert einen Standortparameter:

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

Meistens möchten Sie vielleicht Folgendes (wie von vsync vorgeschlagen):

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

Oder noch besser, verwenden Sie die path Modul (wie von Druska vorgeschlagen):

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

Warum Favicon ist besser als statisch

Laut dem Paketbeschreibung:

Dieses Modul speichert das Symbol im Speicher, um die Leistung zu verbessern, indem der Festplattenzugriff übersprungen wird.
Dieses Modul bietet eine ETag basierend auf dem Inhalt des Symbols und nicht auf Dateisystemeigenschaften.
Dieses Modul wird mit den kompatibelsten dienen Content-Type.

Question 3

Keine zusätzliche Middleware erforderlich. Benutz einfach:

app.use("https://stackoverflow.com/favicon.ico", express.static('images/favicon.ico'));

Question 4

Keine benutzerdefinierte Middleware erforderlich?! Ausdrücklich:

 //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="https://stackoverflow.com/public/favicon.ico">

Question 5

Smiley-Favicon, um Fehler zu vermeiden:

 //const fs = require('fs'); 
 //const favicon = fs.readFileSync(__dirname+"https://stackoverflow.com/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("https://stackoverflow.com/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

mache vielleicht hier ein Icon: http://www.favicon.cc/ oder hier :http://favicon-generator.org

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

Ersetzen Sie dann den Basiswert des Symbols 64

allgemeine informationen zum erstellen eines personalisierten fav-icons

Symbole werden mit Photoshop oder Inkscape erstellt, vielleicht Inkscape, dann Photoshop für Lebendigkeit und Farbkorrektur (im Bild-> Anpassungsmenü).

für schnelles Symbol goto 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 vielleicht etwas aus einem anderen Vektor-Clipart-Bild hinzu, wählen Sie dann zum Exportieren die zu exportierenden Teile aus und klicken Sie auf Datei> Exportieren, wählen Sie eine Größe wie 16×16 für Favicon oder 32×32. zur weiteren Bearbeitung 128×128 oder 256×256. Das ico-Paket kann mehrere Symbolgrößen enthalten. Es kann zusammen mit einem 16×16-Pixel-Favicon ein hochwertiges Symbol für den Link zur Website enthalten.

Dann vielleicht das Bild in Photoshop verbessern. wie Lebendigkeit, Abschrägungseffekt, runde Maske, irgendetwas.

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

um das Favicon zur Website hinzuzufügen. Legen Sie einfach die favicon.ico als Datei in den Stammordner der Domain. zum Beispiel in node.js im öffentlichen Ordner, der die statischen Dateien enthält. Es muss nichts Besonderes sein, wie Code oben, nur eine einfache Datei.

Question 6

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

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

Question 7

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

Question 8

Wenn Sie einen statischen Pfad festgelegt haben, verwenden Sie einfach die <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.