Why won't a remote browser (google-chrome) request a favicon

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

Why won't a remote browser (google-chrome) request a favicon

By Mark Hickman
- Wed Feb 03, 2021 4:46 pm #90404 I have a running ESP8266WebServer. I added:
<link rel='icon' href='http://192.168.1.177/ico/favicon.ico'>
to the root header handler and created an action to send the favicon.ico upon a request including "ico/favicon.ico". A const char* literal is transmitted containing the properly formatted icon.

I can request the icon directly from google-chrome via the URL "IP_ADDRESS/ico/favicon.ico". However, when I access "IP_ADDRESS/" I see no attempt in the debug window on google-chrome to request the favicon.

I have installed the same header link and the inc/favicon.ico file on a page served by apache2 on another machine. Chrome properly retrieves the file and displays the icon on the tab of the browser window as I intended.

I have fiddled around trying to get the header of the response to the root request to match as closely to how apache2 responds but have not detected any change in the action on the browser side. I do not know if the browser is not trying or if it is failing silently. I'm rusty on stream capture tools so I cannot easily determine which case it is. I am suspecting it is the latter, trying but failing silently, but I have no evidence to support that.

I am not familiar with Connection: KeepAlive and cannot determine ESP8266WebServer-impl.h can be configured to support keepAlive. I was able to change text for Connect:
sendHeader(String(F("Connection")), String(F("Keep-Alive")));
but that is only a text change, not a change of state. It did make the header more closely match the header returned by apache2 but did not change chrome's behavior.

The server action is as follows:

server.on("ico/favicon.ico", []() {
static const uint8_t ico[] PROGMEM = {
0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x10, 0x10, 0x02, 0x00, 0x01, 0x00, 0x01, 0x00, 0xB0, 0x00,
0x00, 0x00, 0x16, 0x00, 0x00, 0x00, 0x28, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x20, 0x00,
0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFF, 0xFF, 0xFF, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0xFF,
0x00, 0x00, 0xEF, 0xF7, 0x00, 0x00, 0xEF, 0xF7, 0x00, 0x00, 0xEE, 0x77, 0x00, 0x00, 0xEF, 0xF7,
0x00, 0x00, 0xEF, 0xF7, 0x00, 0x00, 0xEF, 0xF7, 0x00, 0x00, 0xE3, 0xCF, 0x00, 0x00, 0xF1, 0x9F,
0x00, 0x00, 0xF0, 0x3F, 0x00, 0x00, 0xFE, 0x7F, 0x00, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0xFF,
0x00, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
server.send(200, "image/vnd.microsoft.icon", ico, sizeof(ico));
});

What response to "GET /" looks like:

<html>
<head>
<link rel='icon' href='http://192.168.1.177/ico/favicon.ico'>
<title>ESP8266 Furnace</title>
<style> body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>
</head>
<body>
<h1>Low Outside Temperature Furnace Cycling</h1>
<p>Uptime: 00:00:57</p>
<p>Temp C: 18.50 Temp F: 65.30</p>
<p>Zone Thermostat Status: Zone Thermostats Enabled</p> <p>Circulator Status: Forced Circulation not Required</p>
<p>Debug: Entered testTemp with tempC = 5.00</p>
</body>
</html>

Please let me know where I should be looking or what tools I should be using. My workstation is linux.
User avatar

Re: Why won't a remote browser (google-chrome) request a fav

By jankop
- Thu Feb 04, 2021 6:04 am #90409 Hi, I have a favicon in root, so I don't need a link in HTML. When Chrome doesn't get a favicon, it remembers it for a long time and doesn't ask for it. I ran Edge and favicoń appeared. Be sure to try 'http: //192.168.1.177/ico/favicon.ico' from a browser command line. If you get a favicon, everything should be fine. I mention favicon and SPIFFS in my project, but it is only in Czech. But the translator will probably handle it.
https://www.fancon.cz/esp8266-humi-server-klient/arduino-humi-server-client.html
User avatar

Re: Why won't a remote browser (google-chrome) request a fav

By Mark Hickman
- Thu Feb 04, 2021 8:17 am #90412
jankop wrote:Hi, I have a favicon in root, so I don't need a link in HTML. When Chrome doesn't get a favicon, it remembers it for a long time and doesn't ask for it. I ran Edge and favicoń appeared. Be sure to try 'http: //192.168.1.177/ico/favicon.ico' from a browser command line. If you get a favicon, everything should be fine. I mention favicon and SPIFFS in my project, but it is only in Czech. But the translator will probably handle it.
https://www.fancon.cz/esp8266-humi-server-klient/arduino-humi-server-client.html


Thanks. 'http: //192.168.1.177/ico/favicon.ico' has worked. I was not aware that chrome would ignore making the request for some time after a failure. I have thought about placing the favicon.ico in root but got sidetracked due to having the same configuration working on apache2 but not the NodeMCU.

I just moved favicon.ico to root with no change on chrome. I did start firefox and it is working there. The chrome debugger is now showing a GET /favicon.ico that fails to complete, so I now have something to explore. Looks like a timeout issue but I at least have a path to follow.

Thanks again for your assistance.
User avatar

Re: Why won't a remote browser (google-chrome) request a fav

By Mark Hickman
- Thu Feb 04, 2021 9:48 am #90414 favicon.ico is working now. Initial problem that browsers sometimes ignored was that I had inadvertently truncated the image data when copying it. The second was needing to bypass the browser cache ( ctrl+f5) in order to refresh. Using a different browser or logging in with a different account during debug helps.
 Reply
Return to Newbie Corner