web-dev-qa-db-fra.com

Impossible de modifier Favicon avec Express.js

C'est une question très basique, mais j'essaie de changer le 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é que est un favicon.ico dans le /public/images/favicon.ico. Il n’ya rien non plus sur un favicon.ico dans la console, ce qui me porte à croire que cette ligne de code est en cours de traitement. ignoré. Tout le reste de la fonction (définition du port, définition du répertoire des vues, définition du moteur de modèle, etc.) semble fonctionner correctement. Pourquoi cette ligne de code ne serait-elle pas exécutée?

Ce que j'ai essayé

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

Merci d'avance.

Mise à jour: Je l'ai mis au travail. Voir ma réponse ci-dessous pour plus d'informations.

node.jsexpressfavicon
49
gtmtg

J'ai essayé de visiter le site Safari pour la première fois (j'utilise normalement Chrome) et j'ai remarqué qu'il affichait le bon favicon. J'ai essayé à nouveau de vider mon cache dans Chrome (deux fois) en vain, mais après plusieurs recherches, j'ai constaté que les favicons ne sont apparemment pas stockés dans le cache . J'ai "rafraîchi mon favicon" en utilisant la méthode décrite ici et cela a fonctionné!

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

  1. Ouvrez 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 d'actualisation du navigateur approprié.
  4. Fermez le navigateur et ouvrez votre site Web - le tour est joué, votre favicon a été mis à jour!
70
gtmtg

Ce qui a fonctionné pour moi finalement:

Regarde que le 

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 la documentation Express: "L'ordre dans lequel les middlewares sont" définis "à l'aide de app.use() est très important, ils sont appelés de manière séquentielle, ce qui définit la priorité des middlewares."

Je n'avais pas besoin de définir maxAge.

Pour le tester:

  • Redémarrez le serveur avec node app.js
  • Effacer le cache du navigateur
  • Actualisez le favicon en y accédant directement en utilisant "localhost: 3000/your_path_to_the favicon/favicon.ico" et en rechargeant 
34
user976647

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

Si tu utilises

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

Vous obtiendrez cette erreur:

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

Ce que vous allez avoir besoin est d'obtenir serve-favicon .

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'));
15
captDaylight

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

Mettez favicon dans votre dossier public; Ajoutez ensuite une chaîne de requête à votre URL d'icône, par exemple

<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)>

Dans ce cas, Chrome est le navigateur qui se comporte mal. C'EST À DIRE. Firefox. Safari (tous sous Windows) a bien fonctionné, SANS l'astuce ci-dessus.

2
joedotnot

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).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 comment créer une icône 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 image-> réglages).

pour une icône rapide goto http://www.clker.com/ et choisissez des cliparts vectoriels, puis téléchargez-les au format svg ..__ puis apportez-les à inkscape et modifiez les couleurs ou supprimez des parties, ajoutez peut-être quelque chose d'un autre image clipart vectoriel, puis pour exporter, sélectionnez les pièces à exporter et cliquez sur Fichier> Exporter, choisissez une taille telle que 16x16 pour favicon ou 32x32, pour une modification ultérieure en 128x128 ou 256x256. Le paquet ico peut avoir plusieurs tailles d'icônes à l'intérieur. il peut avoir avec l'icône fav de 16x16 pixels des icônes de haute qualité pour les liens vers le site Web.

alors peut-être améliorer l'image dans Photoshop. comme masque rond vibrant bivel, 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 les icônes (recherche comme "windows icon editor opensource", expliquez comment créer deux images de taille différente dans une seule icône) .

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

1
Shimon Doodkin

Le moyen le plus simple que je pouvais trouver (valide uniquement pour les développeurs locaux) consistait à héberger le serveur sur un autre port

PORT=3001 npm run start

1
Bhavin

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

0
zemirco

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);
            }
     });
}
0
med116