Unable to modify favicon using Express.js

Question

This is really a basic question, but I'm trying to change the icon of my node.js / Express application using

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

and I still get the default badges. This is in my app.configure function, and yes, I checked that there is a favicon.ico in /public/images/favicon.ico . There is nothing about favicon.ico in the console that makes me think that this line of code is ignored. Everything else in the function (installation port, setting view directories, setting the template engine, etc.) seems to work fine, so why won't this line of code run?

What i tried

• Browser cache emptying
• Restarting the terminal and starting node app.js again
• Adding { maxAge: 2592000000 } as described here

Thanks in advance.

Update: I got it to work. See My answer below for more information.

Answer 1

I first visited the site in Safari (I usually use Chrome) and noticed that it shows the correct icon. I tried clearing my cache in Chrome again (twice) to no avail, but after a larger search, I found that obviously favicons are not stored in the cache . I “updated my icon” using the method described here and it will work!

Here's the method (modified from the link above) if the link doesn't work:

• Open Chrome / Problem Browser
• Go directly to the favicon.ico file, for example. http: // localhost: 3000 / favicon.ico
• Update the favicon.ico URL by pressing F5 or the appropriate browser. Refresh (Refresh).
• Close your browser and open your website - voila, your icon has been updated!

Answer 2

What worked for me finally:

Look what

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

located at the beginning of the application configuration function I used to have it at the end. As stated in the express document: "The order in which the middleware is defined using app.use() is very important, they are called sequentially, so this determines the priority of the middleware."

I did not need to install maxAge.

To check this:

• Restart the server using node app.js
• Clear browser cache
• Update Favicon with direct access to it using "localhost: 3000 / your_path_to_the favicon / favicon.ico" and reloading

Answer 3

The above answer is no longer valid .

If you use

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

You will get this error:

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

What you need to do is get serve-favicon .

run

 npm install serve-favicon --save 

then add this to your application

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

Answer 4

emoticon favicon to prevent error:

  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); }); / 4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAAAAAEAAAEAAAAAEAAAABAAAAEAAAAAAQAAAQAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAEAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD // wAA // 8AAP // AAD8HwAA ++ 8AAPf3AADv + wAA7 / sAAP // AAD // wAA + 98AAP // AAD // wAA // 8AAP // AAD // wAA'  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); }); 

to change the icon in the code above

create an icon, perhaps here: http://www.favicon.cc/ or here: http://favicon-generator.org

convert it to base64, maybe here: http://base64converter.com/

then replace icon 64 value

general information on how to create a personalized fav icon

the icons are created using Photoshop or Inkscape, possibly inkscape, and then Photoshop to adjust the brightness and color correction (in the image settings menu →).

for the goto quick icon http://www.clker.com/ and select some vector clips and load as svg. then bring it to inkscape and change the colors or delete the parts, maybe add something from another image in the vector clip art, then for export select the parts to export and click the file> export, select a size, for example 16x16 for favicon or 32x32, for further 128x128 or 256x256 editing. The ico package can have several icon sizes inside. it may have a 16x16 pixel fav icon of high quality icon for linking to a website.

it is possible to improve imaage in Photoshop. like a vibrating round circular mask, whatever.

then upload this image to one of the sites that generate the icons. there are also programs for windows for editing icons (search as a “window icon editor”, specify how to create two images of different sizes inside the same icon).

to add an icon to the website. just put favicon.ico in the file in the root folder of the domain. for example, in nodejs in a shared folder that links static files. it should not be anything special, like the code above a simple file.

Answer 5

Have you tried to clear your browser cache? The old icon may already be in the cache.

Answer 6

How to do this without expression:

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

Answer 7

What worked for me. Install express to serve your static resources, as usual, for example

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

Put the icon in your shared folder; Then add the query string to the icon url like

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

In this case, Chrome is a bad browser; IE Fire fox. Safari (everything on Windows) worked fine WITHOUT the above trick.