No favicon request

Question

I am writing a simple node.js file server using node http module (I do not use EXPRESS).

I noticed that my initial GET request is triggered and all subsequent GET requests are created for css and javascript; however, I do not receive a request for an icon. Even when I look at the page inspector, I have no errors and the icon does not appear in the resources.

HTML

// Inside the head of index.html <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> 

node.js

 http.createServer(function(req, res){ // log each req method console.log(`${req.method} request for ${req.url}`); }).listen(3000) 

The default icon is a mustache, but not my custom icon. What am I missing here?

Just in case, this refers to the issue. I am using node v4.2.4

Edit

I think this has something to do with the way I read and maintain the file.

 if ( req.url.match(/.ico$/) ){ var icoPath = path.join(__dirname, 'public', req.url); var fileStream = fs.createReadStream(icoPath, "BINARY"); res.writeHead(200, {"Content-Type": "image/x-icon"}); fileStream.pipe(res) 

Should I use a read stream? Is encoding binary or utf-8 or something else?

Answer 1

I played with your repo code and made some changes to see if I can serve my favicon or not. I found out some weird stuff:

• favicon service is complicated and mysterious (my point)
• Chrome used to have a bug, or maybe still be related to favicon (Google, please have a lot of results)
• Looks like favicon browser caches, forced update, and various methods used to get the new / updated favicon browser, see here
• I found that after the Chrome browser serves favicon, there is no longer a favicon request in a subsequent request. Until you change the href of favicon in your html file and force the browser to make a new request.

I copied the bit / snippets of your code to reproduce the problem and got it working. I decided to use favicon in different ways, as shown below:

server.js

 if(req.url.match("/requestFavicon") ){ var img = fs.readFileSync('public/favicon.ico'); res.writeHead(200, {'Content-Type': 'image/x-icon' }); res.end(img, 'binary'); } 

index.html

 <link rel="shortcut icon" type="image/x-icon" href="/requestFavicon"/> 

Made nodemon server.js and used the Chrome browser to request http://192.168.1.18:8080 . terminal showed the following:

 GET request for / GET request for /requestFavicon 

And favicon.ico (the tiny .ico car taken from here ) displayed in the browser, see below:

After the favicon was displayed above, any subsequent http://192.1668.18:8080 did not issue a request for favicon , but displayed only the following request in the nodejs terminal

 GET request for / 

Likewise, there is no favicon related query on the developer's developer network tab.

At this point, I assumed that the browser cached it and did not request at all, because it already has it. So I searched googled and stumbled upon this SO question to force update favicon request. So change favicon href to index.html (and server.js ) and try again

 <link rel="shortcut icon" type="image/x-icon" href="/updatedRequestFavicon"/> 

Now retry accessing http://192.168.1.18:8080 and look at the nodejs terminal as well as the Chrome developer console, and I get the following:

 GET request for / GET request for /UpdatedRequestFavicon 

Now I want to completely change favicon and put in a new one. I added this updated server.js and updated the browser. Surprisingly, the console log in nodejs (for the new favicon ), no request in the browser to the developers of the newtork console tools (therefore, it then served as a cached value).

To get the browser to get a new favicon , I want to change the href in favicon in index.html and update server.js new href, and then see if Brwoser is forcibly requested for the updated icon or continue to use the cached one.

 <link rel="shortcut icon" type="image/x-icon" href="/NewFavicon"/> if(req.url.match("/NewFavicon") ){ var img = fs.readFileSync('public/favicon_new.ico'); res.writeHead(200, {'Content-Type': 'image/x-icon' }); res.end(img, 'binary'); } 

Modified. The changes are reloaded by nodemon, the browser is updated, and here is the result:

 GET request for / GET request for /NewFavicon 

Your problem may be related to

• The browser already has a cached icon, so it does not request it
• You are not using the icon correctly in server.js
• Something else

If you want to test my code feel free, here is server.js

 var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, res) { // Log req Method console.log(`${req.method} request for ${req.url}`); //res.writeHead(200); //res.end('index.html'); // Serve html, js, css and img if ( req.url === "/" ){ fs.readFile("index.html", "UTF-8", function(err, html){ res.writeHead(200, {"Content-Type": "text/html"}); res.end(html); }); } if(req.url.match("/NewFavicon") ){ console.log('Request for favicon.ico'); var img = fs.readFileSync('public/favicon_new.ico'); res.writeHead(200, {'Content-Type': 'image/x-icon' }); res.end(img, 'binary'); //var icoPath = path.join(__dirname, 'public', req.url); //var fileStream = fs.createReadStream(icoPath, "base64"); //res.writeHead(200, {"Content-Type": "image/x-icon"}); //fileStream.pipe(res); } }); server.listen(8080); 

Here is index.html

 <!DOCTYPE html> <html> <head> <title>nodeCAST</title> <link rel="shortcut icon" type="image/x-icon" href="/NewFavicon"/> <!--<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon">--> </head> <body> <p>I am the index.html</p> </body> </html> 

I put favicon.ico in the / public directory. Good luck.

EDIT

Tested with Chrome browser version 47.0.2526.111 m

Node v4.2.4

Answer 2

The browser automatically executes favicon.ico request when the page loads. This code, which end res ponse, will receive a favicon request:

 http.createServer(function(req, res) { console.log(`${req.method} ${req.url}`); res.writeHead(200); res.end(); }).listen(3000); 

As you can see in the launch log:

 GET / GET /favicon.ico