Comment personnaliser le favicon dans l'Express?

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

app.use(express.favicon());

Maintenant, comment puis-je configurer mon propre favicon.ico?

  • Assurez-vous de bien effacer le cache du navigateur, sinon vous risquez de ne pas le voir changer
InformationsquelleAutor Ilya Karnaukhov | 2013-03-17
  1. 216

    En Express 4

    Installer le favicon middleware puis faire:

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

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

    Ou mieux, à l'aide de la path module:

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

    (à noter que cette solution fonctionne dans express 3 applications)

    En Express 3

    Selon l'API, .favicon accepte un paramètre emplacement:

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

    La plupart du temps, vous pouvez (comme vsync suggéré):

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

    Ou mieux encore, utiliser le path module (comme Druska suggéré):

    app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico')));
    • Merci! Auriez-vous l'esprit l'ouverture d'un problème donc, je peux jeter un oeil là-bas? Espérons juste le chemin de trucs et de savoir que path.join(__dirname, "public") résultats dans les chaînes concaténées sans un séparateur? La taille de l'échantillon le plus rapide, nous pouvons résoudre ce (donc si vous pouvez s'il vous plaît juste à la jointure de la partie).
    • Quels sont les avantages à utiliser un autre middleware (maintenu par quelqu'un qui n'auraient pas fait de maintenir dans le futur) au lieu de la plus semplicistic façon explique par Eduardo ?
    • tout d'abord - bonne question! servez-de favicon est maintenu par nous (le Node.js la fondation) et Doug (qui maintient l'express) - c'est, c'est par les mêmes personnes qui, à écrire et à maintenir exprimer. Vous pouvez voir le readme pour l'expliquer, mais en gros: la journalisation, la mise en cache, ETag de manutention et de corriger Content-Type. Vous pouvez voir ce que ça donne ici. Pensez-vous qu'il est justifié de l'édition de ce dans la réponse?
    • Merci Benjamin pour l'effacement des caractéristiques favicon fournir. Je voudrais écrire que dans la accepté de répondre bien que n'étant pas strictement nécessaire.
    InformationsquelleAutor Benjamin Gruenbaum
  2. 30

    Sans supplément de middlewares nécessaire. Utilisez simplement:

    app.use('/favicon.ico', express.static('images/favicon.ico'));
    • actuellement pas de travail
    • Yep, cela devrait suffire et c'est la bonne réponse, car un middleware pour cela se sent comme exagéré.
    InformationsquelleAutor Eduardo
  3. 15

    smiley favicon pour prévenir erreur:

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

    à changer d'icône dans le code ci-dessus

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

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

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

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

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

    rapide icône goto http://www.clker.com/ et choisir un Vecteur Clip-Arts, et de télécharger svg.
    ensuite inkscape (https://inkscape.org/) et de modifier les couleurs ou supprimer des parties, peut-être ajouter quelque chose à partir d'un autre vecteur clipart image, puis sélectionnez exporter les pièces à exporter et cliquez sur le fichier>exporter, choisir la taille comme 16x16 pour favicon ou 32x32. pour de plus amples modifier 128x128 ou 256x256. ico paquet peut avoir plusieurs tailles d'icône à l'intérieur. il peut avoir avec 16x16 pixels un favicon icônes de haute qualité pour le lien pour le site web.

    alors peut-être améliorer l'image dans photoshop. comme l'éclat, effet de biseau, ronde masque, quoi que ce soit.

    puis télécharger cette image à 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 du site internet. il suffit de mettre la favicon.ico en tant que fichier dans le dossier racine du domaine. par exemple, dans node.js en public dossier qui contient les fichiers statiques. il n'a pas à être quelque chose de spécial comme le code ci-dessus dans un simple fichier.

    • Comme cette approche le mieux. J'ai juste utilisé un fichier de servir au lieu de base64: fs.createReadStream("./public/favicon.ico").pipe(res);
    • Pourquoi ne pas simplement utiliser express.favicon depuis votre déjà express?? Pourquoi créer un ensemble de l'itinéraire, si vous pouvez tout aussi bien utiliser une statique dossier? En outre, que la magie de la chaîne (votre smiley) n'est pas de faire de votre cas mieux.
    • Vous n'avez pas besoin de code pour mettre favicon. Il suffit de le mettre en tant que fichier statique dans le répertoire des fichiers.
    InformationsquelleAutor Shimon Doodkin
  4. 11

    Pas besoin de coutume middleware?! Dans l'express: 

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

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

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

    Je l'ai eu à travailler en local sans l' __dirname + mais je ne pouvais pas le faire fonctionner sur mon serveur déployé.

    • essayez app.use(express.favicon('./public/images/favicon.ico'));
    InformationsquelleAutor ThomasReggi
  6. 5

    Si vous utilisez Express > 4.0, vous pourrait aller pour servez-de favicon

    • Pourquoi devrions-nous aller pour servir de favicon?
    InformationsquelleAutor Anastasios Andronidis
  7. 3

    Si vous avez statique de chemin ensemble, alors il suffit d'utiliser la <link href="/images/favicon.ico" type="image/x-icon"> dans vos vues. Besoin de rien d'autre. Assurez-vous que vous avez votre dossier d'images à l'intérieur du dossier public.

    • Juste assurez-vous d'utiliser 127.0.0.1 au lieu de localhost dans Google Chrome alors que vous développez, pour une raison qu'il fixe pour moi.
    InformationsquelleAutor Mohsin Khan
  8. 0

    Le code ci-dessous fonctionne:

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

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

    Assurez-vous de les actualiser de votre navigateur ou de vider votre cache.

    InformationsquelleAutor blakeface
  9. 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" ajouter un nouveau lien dans le html de la tête:

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

    Cela a bien fonctionné dans un projet d'auto-généré avec la commande:

    express my-project
    InformationsquelleAutor Nikolas H
  10. 0

    Installer express-favicon middleware:

    npm install express-favicon --save

    L'utiliser comme ceci:

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

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

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

    étape 1: télécharger icône à partir d'ici https://icons8.com/ ou créer votre propre

    étape 2: aller à https://www.favicongenerator.com/

    étape 3: télécharger le fichier téléchargé icône.fichier png > set 16px > créer favicon > télécharger

    etape 4: aller à dossier téléchargements, vous verrez.fichier ico], le renommer comme favicon.ico

    étape 5: copie favicon.ico dans le répertoire public que vous avez créé

    etape 6: ajouter le code ci-dessous sur votre .carlin le fichier sous la balise head, ci-dessous balise de titre 

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

    étape 7: enregistrer > redémarrer le serveur > fermez le navigateur > rouvrir le navigateur > favicon s'affiche

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

    InformationsquelleAutor Mehran Ahemad