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/updatedfavicon
, see here - i found once chrome browser served favicon in subsequent request, there no more favicon request. not until change
href
offavicon
inhtml
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:
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
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
your issue related
- browser has cached favicon hence, not request it
- you not serving favicon in server.js
- 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
Post a Comment