html - no request for favicon -


i writing simple node.js file server using node's http module (i not using express).

i noticed initial request firing , subsequent request being made css , javascript; however, not getting request favicon. when @ at page inspector, don't have errors , favicon not showing in resources.

html

// inside 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 ${req.url}`);  }).listen(3000) 

there default icon mustache, not custom icon. missing here?

just in case it's relevant question. using node v4.2.4

edit

i think has how reading , serving 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 not using readstream? encoding binary or utf-8 or else?

i played around repo code , did changes see if can serve favicon or not. found out strange stuff:

  • favicon serving tricky , mysterious (my point of view)
  • chrome used have bug or might still have relating favicon (google please, there many results)
  • seems browser caches favicon, force refresh , different methods used make browser new/updated favicon, see here
  • i found once chrome browser served favicon in subsequent request, there no more favicon request. not until change href of favicon in html file , forces browser make fresh request.

i copied bit/pieces of code reproduce issue , got working. decided serve favicon differently see 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"/> 

did nodemon server.js , used chrome browser make http://192.168.1.18:8080 request. terminal showed following:

get request / request /requestfavicon 

and favicon.ico (tiny vehicle .ico taken here) displayed in browser see below:

enter image description here

after above favicon displayed, subsequent http://192.1668.18:8080 produced no request favicon but, displayed following request in terminal of nodejs

get request / 

similarly no favicon related request in browser developer tool network tab.

at point, assumed browser has cached , not request @ because has it. googled , came across so question force refresh favicon request. so, let's change favicon href in index.html (and server.js) , retry

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

now retry access http://192.168.1.18:8080 , watch nodejs terminal chrome developer console , following:

get request / request /updatedrequestfavicon 

enter image description here

now want totally change favicon , put new one. added this 1 updated server.js , refreshed browser. surprisingly no console log in nodejs (for new favicon), no request in browser developer tools newtork console (so served cached value then).

to force browser new favicon, want change href of favicon in index.html , and update server.js new href , see if brwoser gets forced request updated favicon or keep using 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');  } 

changed. changes reloaded nodemon, refresh browser , here result:

get request / request /newfavicon 

enter image description here

your issue related

  1. browser has cached favicon hence, not request it
  2. you not serving favicon in server.js
  3. something else

if want test code, feel free, here 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 ${req.url}`);   //res.writehead(200);   //res.end('index.html');      // serve html, js, css , 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 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 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 index.html</p> </body> </html> 

i placed favicon.ico under /public directory. luck.

edit

tested chrome browser version 47.0.2526.111 m

node v4.2.4


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -