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:
faviconserving 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
hrefoffaviconinhtmlfile , 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