Comment définir un favicon personnalisé dans Express?


136

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é?


3
Assurez-vous de vider correctement le cache du navigateur, sinon vous ne le verrez peut-être pas changer
vsync

L'utilisation app.use(express.favicon())d'Express 4 donne: La plupart des middlewares (comme favicon) ne sont plus fournis avec Express et doivent être installés séparément. Veuillez consulter github.com/senchalabs/connect#middleware . Alternativement, vous pouvez fournir aucun favicon avec: app.get('/favicon.ico', (req, res) => res.status(200)) Express js prevent GET /favicon.ico
utilisateur

Réponses:


239

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.

1
Merci! Pourriez-vous ouvrir un numéro pour que je puisse y jeter un coup d'œil? Espérons que juste les trucs de chemin et à savoir que path.join(__dirname, "public")les chaînes sont concaténées sans séparateur? Plus l'échantillon est petit, plus vite nous pouvons résoudre ce problème (donc si vous pouvez simplement la jointure)
Benjamin Gruenbaum

Quel est l'avantage d'utiliser un autre middleware (maintenu par quelqu'un qui pourrait ne pas le maintenir à l'avenir) au lieu de la manière plus sempliciste expliquée par Eduardo ?
LucaM le

3
@LucaM tout d'abord - bonne question! serve-favicon est maintenu par nous (la fondation Node.js) et Doug (qui maintient express) - c'est-à-dire que ce sont les mêmes personnes qui écrivent et maintiennent s'exprimer. Vous pouvez voir le readme pour savoir pourquoi, mais essentiellement: journalisation, mise en cache, gestion ETag et correction Content-Type. Vous pouvez voir ce qu'il fait ici . Pensez-vous qu'il y a intérêt à modifier cela dans la réponse?
Benjamin Gruenbaum

1
Merci Benjamin d'avoir effacé les fonctionnalités offertes par favicon . J'écrirais cela dans la réponse acceptée bien que ce ne soit pas strictement nécessaire.
LucaM

36

Aucun middlewares supplémentaires requis. Utilisez simplement:

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

1
Oui, cela devrait suffire et c'est la bonne réponse car un middleware supplémentaire pour cela semble excessif.
jlstr

1
@jlstr c'est comme 20 lignes de code, quel genre de surpuissance voulez-vous dire)) Et c'est du côté serveur, donc le nombre de petites dépendances n'a pas d'importance. Et le middleware mentionné fournit : 1) la mise en cache de la mémoire 2) définir correctement ETag 3) définir correctementContent-Type
maxkoryukov

18

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.


1
J'aime cette approche la meilleure. Je viens d'utiliser un fichier pour servir au lieu de base64: fs.createReadStream ("./ public / favicon.ico"). Pipe (res);
DaafVader

2
Pourquoi ne pas simplement utiliser express.favicon puisque vous utilisez déjà express ?? Pourquoi créer une route entière si vous pouvez tout aussi bien utiliser un dossier statique? En plus de cela, cette chaîne magique (votre smiley) ne rend pas votre cas meilleur.
SubliemeSiem

1
Vous n'avez besoin d'aucun code pour mettre un favicon. Mettez-le simplement sous forme de fichier dans le répertoire des fichiers statiques.
Shimon Doodkin

16

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

1
C'est DaafVader. Cela a fonctionné. Mon paramètre était: app.use (express.static ('public')). J'ai enregistré mon favicon dans le dossier img qui est à l'intérieur du dossier public. Dans mon fichier html dans la section head, j'ai utilisé <link rel = "icon" href = "/ img / favicon.ico"> où favicon.ico était mon nom de fichier de mon favicon.
Nhon Ha

8
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é.


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


4

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.


1
Assurez-vous simplement que vous utilisez 127.0.0.1plutôt que localhostdans Google Chrome pendant que vous développez, pour une raison qui a résolu le problème pour moi.
cprcrack

1

Installez le express-faviconmiddleware:

npm install express-favicon --save

Utilisez-le comme ceci:

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

1

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.


0

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.


0

é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.


0

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

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.