Comment définir un favicon personnalisé dans Express?

J'ai récemment commencé à travailler dans Node.js et dans le fichier app.js, il y a cette ligne:

app.use(express.favicon());

Maintenant, comment configurer mon propre favicon.ico personnalisé?

Dans Express 4

Installez le middleware favicon puis faites:

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

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

Ou mieux, en utilisant le pathmodule:

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

(notez que cette solution fonctionnera également dans les applications express 3)

Dans Express 3

Selon l'API, .faviconaccepte un paramètre d'emplacement:

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

La plupart du temps, vous voudrez peut-être ceci (comme suggéré par vsync):

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

Ou mieux encore, utilisez le pathmodule (comme Druska l'a suggéré):

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

Pourquoi favicon est meilleur que statique

Selon la description du paquet :

1. Ce module met l'icône en mémoire cache pour améliorer les performances en ignorant l'accès au disque.
2. Ce module fournit un ETagbasé sur le contenu de l'icône, plutôt que sur les propriétés du système de fichiers.
3. Ce module servira avec les plus compatibles Content-Type.

Aucun middlewares supplémentaires requis. Utilisez simplement:

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

smiley favicon pour éviter les erreurs:

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

pour changer l'icône dans le code ci-dessus

créer une icône peut-être ici: http://www.favicon.cc/ ou ici: http://favicon-generator.org

convertissez-le en base64 peut-être ici: http://base64converter.com/

puis remplacez la valeur de base de l'icône 64

informations générales comment créer une icône fav personnalisée

les icônes sont faites à l'aide de photoshop ou inkscape, peut-être inkscape puis photoshop pour la vibration et la correction des couleurs (dans le menu image-> réglages).

pour une icône rapide, rendez-vous sur http://www.clker.com/ et choisissez des cliparts vectoriels et téléchargez-les au format svg. puis apportez-le à inkscape ( https://inkscape.org/ ) et changez les couleurs ou supprimez des pièces, ajoutez peut-être quelque chose à partir d'une autre image clipart vectorielle, puis pour exporter, sélectionnez les pièces à exporter et cliquez sur fichier> exporter, choisissez une taille comme 16x16 pour favicon ou 32x32. pour une modification ultérieure 128x128 ou 256x256. Le package ico peut contenir plusieurs tailles d'icônes. il peut avoir avec un favicon 16x16 pixels des icônes de haute qualité pour le lien vers le site Web.

alors peut-être améliorer l'image dans Photoshop. comme la vibrance, l'effet biseauté, le masque rond, n'importe quoi.

puis téléchargez cette image sur l'un des sites Web qui génèrent des favicons. il existe également des programmes pour Windows pour éditer des icônes comme https://sourceforge.net/projects/variicons/ .

pour ajouter le favicon au site Web. mettez simplement le favicon.ico sous forme de fichier dans le dossier racine du domaine. par exemple dans node.js dans le dossier public qui contient les fichiers statiques. il ne doit pas s'agir de quelque chose de spécial comme du code au-dessus d'un simple fichier.

Pas besoin de middleware personnalisé?! En express:

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

Ensuite, mettez votre favicon en public et ajoutez la ligne suivante dans la tête de votre html:

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

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

Je l'ai fait fonctionner localement sans le __dirname +mais je n'ai pas pu le faire fonctionner sur mon serveur déployé.

Si vous utilisez Express> 4.0, vous pouvez opter pour serve-favicon

Si vous avez défini un chemin statique, utilisez simplement le <link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">dans vos vues. Pas besoin d'autre chose. Veuillez vous assurer que vous avez votre dossier images dans le dossier public.

Installez le express-faviconmiddleware:

npm install express-favicon --save

Utilisez-le comme ceci:

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

Vous devez installer un middleware pour servir le favicon.

J'ai essayé ceci tout à l'heure:

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

et j'ai récupéré ce message d'erreur:

Erreur: la plupart des middlewares (comme favicon) ne sont plus fournis avec Express et doivent être installés séparément. Veuillez consulter https://github.com/senchalabs/connect#middleware .

Je pense que nous pouvons considérer cela comme définitif.

Le code ci-dessous fonctionne:

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

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

Assurez-vous simplement d'actualiser votre navigateur ou de vider votre cache.

étape 0: ajoutez le code ci-dessous à app.js ou index.js

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

étape 1: téléchargez l'icône ici https://icons8.com/ ou créez votre propre
étape 2: allez sur https://www.favicongenerator.com/
étape 3 : téléchargez le fichier icon.png téléchargé> définissez 16px> créez un favicon> téléchargez
étape 4: allez dans le dossier des téléchargements, vous trouverez [fichier .ico], renommez-le en favicon.ico
étape 5: copiez favicon.ico dans le répertoire public vous avez créé l'
étape 6: ajoutez le code ci-dessous à votre fichier .pug sous la balise head, sous la balise title

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

étape 7: enregistrer> redémarrer le serveur> fermer le navigateur> rouvrir le navigateur> le favicon apparaît

REMARQUE: vous pouvez utiliser un nom autre que le favicon,
            mais assurez-vous de changer le nom dans le code et dans le dossier public.

Dans app.js:

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

En supposant que l'icône réside dans "/public/images/favicon.ico", ajoutez le lien suivant dans la tête de html:

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

Cela a bien fonctionné dans un projet généré automatiquement avec la commande:

express my-project

Si vous voulez une solution qui n'implique pas de fichiers externes et n'utilise pas express.static(par exemple, un serveur Web et un site ultra-légers à un fichier), vous pouvez utiliser serve-faviconet encoder votre favicon.icofichier en Base64. Comme ça:

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

Remplacez IMAGE_AS_BASE64_STRING_GOES_HEREpar le résultat de l'encodage de votre fichier favicon en Base64. Il existe de nombreux sites qui peuvent faire cela en ligne, faire une recherche.

Notez que vous devrez peut-être redémarrer le serveur et / ou le navigateur pour le voir fonctionner localhost, et une actualisation / effacer le cache du navigateur pour le voir fonctionner sur le Web.