web-dev-qa-db-fra.com

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 puis-je configurer mon propre favicon.ico personnalisé?

javascriptnode.jsexpressfavicon
126
Ilya Karnaukhov

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 module path:

_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, .favicon accepte 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 module path (comme suggéré par Druska):

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

Pourquoi favicon est meilleur que statique

Selon le 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 une ETag basée 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 le plus compatible _Content-Type_.
219
Benjamin Gruenbaum

Aucun middleware supplémentaire requis. Il suffit d'utiliser:

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

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

faire 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 64 de l'icône

informations générales sur la création d'une icône de fav personnalisée

les icônes sont créées avec photoshop ou inkscape, peut-être inkscape puis photoshop pour la correction des vibrations et des couleurs (dans le menu réglages image>).

pour l'icône rapide goto http://www.clker.com/ et choisissez des images clipart vectorielles, puis téléchargez-les au format svg. puis apportez-le à inkscape ( https://inkscape.org/ ) et modifiez les couleurs ou supprimez des parties, ajoutez peut-être quelque chose d'une autre image clipart vectorielle, puis exportez, sélectionnez les parties à exporter et cliquez sur Fichier> exportez, choisissez une taille telle que 16x16 pour favicon ou 32x32. pour éditer davantage 128x128 ou 256x256. Le paquet ico peut avoir plusieurs tailles d'icônes à l'intérieur. il peut avoir avec favicon 16x16 pixels des icônes de haute qualité pour le lien vers le site.

alors peut-être améliorer l'image dans photoshop. comme vibrance, effet de biseau, masque rond, n'importe quoi.

puis téléchargez cette image sur l'un des sites Web générant des favicons. Il existe également des programmes pour Windows permettant de modifier des icônes telles que https://sourceforge.net/projects/variicons/ .

ajouter le favicon au site Web. Il suffit de mettre le fichier favicon.ico en tant que fichier dans le dossier racine du domaine. Par exemple, dans node.js, dans le dossier public contenant les fichiers statiques. il ne doit pas y avoir de spécial comme le code ci-dessus, juste un simple fichier.

16
Shimon Doodkin

Pas besoin de middleware personnalisé?! En express:

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

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

<link rel="icon" href="/public/favicon.ico">
12
DaafVader
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

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

8
ThomasReggi

Si vous utilisez Express> 4.0, vous pouvez choisir serve-favicon

5
Anastasios Andronidis

Si vous avez défini votre chemin statique, utilisez simplement le <link rel="icon" href="/images/favicon.ico" type="image/x-icon"> dans vos vues. Pas besoin de rien d'autre. Assurez-vous que vous avez votre dossier images dans le dossier public.

3
Mohsin Khan

Installez le middleware express-favicon:

npm install express-favicon --save

Utilisez-le comme ceci:

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

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 reçu ce message d'erreur:

Erreur: la plupart des middlewares (tels que les 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.

0
amunnelly

Le code répertorié ci-dessous fonctionne:

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

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

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

0
blakeface

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
0
Nikolas H