Impossible de modifier le favicon avec Express.js

C’est une question très simple, mais j’essaie de changer la favicon de mon application node.js / Express avec

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

et je reçois toujours le favicon par défaut. C’est dans ma fonction app.configure , et oui, j’ai vérifié qu’il y a un favicon.ico dans /public/images/favicon.ico . Il n’y a rien non plus dans un favicon.ico dans la console, ce qui me conduit croire que cette ligne de code est ignorée. Tout le rest de la fonction (port de réglage, définition du répertoire des vues, définition du moteur de modèle, etc.) semble fonctionner correctement, alors pourquoi cette ligne de code ne serait-elle pas en cours d’exécution?

Ce que j’ai essayé

  • Vider le cache du navigateur
  • Redémarrage du terminal et exécution de node app.js nouveau
  • Ajouter { maxAge: 2592000000 } , comme décrit ici

Merci d’avance.

Mise à jour: je l’ai fait fonctionner. Voir ma réponse ci-dessous pour plus d’informations.

J’ai essayé de visiter le site dans Safari pour la première fois (j’utilise normalement Chrome) et j’ai remarqué qu’il affichait le favicon correct. J’ai essayé de vider à nouveau mon cache dans Chrome (deux fois) sans succès, mais après plus de recherches, j’ai trouvé qu’apparemment les favicons n’étaient pas stockées dans le cache . J’ai “rafraîchi mon favicon” en utilisant la méthode décrite ici et ça a marché!

Voici la méthode (modifiée à partir du lien ci-dessus), au cas où le lien serait mort:

  1. Ouvrir Chrome / le navigateur problématique
  2. Accédez directement au fichier favicon.ico, par exemple http: // localhost: 3000 / favicon.ico
  3. Actualisez l’URL favicon.ico en appuyant sur F5 ou sur le bouton Actualiser (recharger) du navigateur approprié.
  4. Fermez le navigateur et ouvrez votre site Web – voila, votre favicon a été mis à jour!

Qu’est-ce qui a fonctionné pour moi finalement:

Regarde ça

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

est au début de la fonction de configuration de l’application . Je l’avais avant à la fin. Comme le dit le document Express: «L’ordre dans lequel le middleware est« défini »à l’aide d’ app.use() est très important, il est invoqué de manière séquentielle, ce qui définit la priorité du middleware.

Je n’ai pas eu besoin de définir de maxAge.

Pour le tester:

  • Redémarrez le serveur avec le node app.js
  • Effacer le cache du navigateur
  • Actualisez le Favicon avec un access direct en utilisant “localhost: 3000 / your_path_to_the favicon / favicon.ico” et en rechargeant

La réponse ci-dessus n’est plus valide .

Si tu utilises

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

Vous aurez cette erreur:

 Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately 

Ce que vous allez devoir faire, c’est obtenir un favicon de service .

courir

 npm install serve-favicon --save 

puis ajoutez ceci à votre application

 var express = require('express'); var favicon = require('serve-favicon'); var app = express(); app.use(favicon(__dirname + '/public/images/favicon.ico')); 

Ce qui a fonctionné pour moi suit. Définissez express pour servir vos ressources statiques comme d’habitude, par exemple

 app.use(express.static('public')); 

Placez le favicon dans votre dossier public; Ensuite, ajoutez une chaîne de requête à votre URL d’icône, par exemple

  

Dans ce cas, Chrome est le navigateur mal conçu; C’EST À DIRE. Firefox. Safari (tout sous Windows) a bien fonctionné, SANS l’astuce ci-dessus.

smiley favicon pour éviter les erreurs:

  var favicon = new Buffer('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).toUTCSsortingng()); res.end(favicon); }); 

changer d’icône dans le code ci-dessus

faites 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 d’icône 64

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

Les icons sont créées à l’aide de photoshop ou inkscape, peut-être inkscape puis photoshop pour la correction de couleurs et de couleurs (dans le menu image-> réglages).

pour l’icône rapide, allez sur http://www.clker.com/ et choisissez des Clip Arts Vector, et téléchargez-les en tant que svg. puis amenez-le à inkscape et changez de couleur ou supprimez des pièces, ajoutez peut-être quelque chose d’une autre image vectorielle, puis exportez les pièces à exporter et cliquez sur fichier> exporter, taille 16×16 pour favicon ou 32×32 pour éditer 128×128 ou 256×256 . Le paquet ico peut avoir plusieurs tailles d’icons à l’intérieur. il peut avoir avec 16×16 pixel fav icône des icons de haute qualité pour le lien pour le site.

puis peut-être améliorer l’image dans photoshop. comme le masque rond vibrant vibrant, tout.

puis téléchargez cette image sur l’un des sites Web qui génèrent des favicons. il y a aussi des programmes pour Windows pour éditer des icons (cherchez comme “éditeur d’icons windows opensource”, voyez comment créer deux images de taille différente à l’intérieur d’une même icône).

append le favicon au site Web. Il suffit de mettre le favicon.ico en tant que fichier dans le dossier des fichiers de votre domaine racine. par exemple dans nodejs dans le dossier public qui contient les fichiers statiques. Il n’est pas nécessaire que ce soit spécial comme le code au-dessus d’un simple fichier.

Avez-vous essayé de vider le cache de votre navigateur? Peut-être que l’ancienne favicon est toujours dans le cache.

Comment faire cela sans express:

 if (req.method == "GET") { if (/favicon\.ico/.test(req.url)) { fs.readFile("home/usr/path/favicon.ico", function(err, data) { if (err) { console.log(err); } else { res.setHeader("Content-Type","image/x-icon"); res.end(data); } }); } 

Le moyen le plus simple que je pouvais utiliser (valable uniquement pour les développeurs locaux, bien sûr) était d’héberger le serveur sur un autre port.

PORT=3001 npm run start