2

I have a webserver setup on my iot device. The device is not really powerful and does not have a file system to store images from.

Nonetheless i would still want to have a favicon given to the browsers that request it. Since I do not have a File System I was planning of saving the image directly into the source code of the device. I have read in this thread that you can convert an image into an encoded string so i can then save the encoded string into a variable somethingg like

String imageString = "Encoded String Here";

So here is google chrome favicon http request looks like

20:46:21.767 -> GET /favicon.ico HTTP/1.1
20:46:21.767 -> Host: 192.168.1.8
20:46:21.767 -> Connection: keep-alive
20:46:21.767 -> User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
20:46:21.814 -> Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
20:46:21.814 -> Referer: http://192.168.1.8/
20:46:21.814 -> Accept-Encoding: gzip, deflate
20:46:21.814 -> Accept-Language: en-US,en;q=0.9,fil;q=0.8

My webserver can only respond to request in pure text. So how would my response look like that the image is now in text format??

HTTP/1.1 200 OK
Connection: close
Content-Type: text/html

//Do i place the encoded string here?? will the browser understand that?
DrakeJest
  • 225
  • 3
  • 13

1 Answers1

2

You can generate a base64 string of your favicon and then insert it into the head of the html document like this:

<link href="data:image/x-icon;base64,<your_base64_here>" rel="icon" type="image/x-icon" />
Lior Pollak
  • 3,362
  • 5
  • 27
  • 48
  • So i will have to ignore the the favicon request? wont that be inefficient as everytime i have to send an html to the browser i have to include the the image? or i can only send it once( like sending it with the home page only) and the browser will save it? – DrakeJest Dec 11 '21 at 13:19
  • In fact, the base64 text is the image- the browser won’t issue a request for favicon – Lior Pollak Dec 11 '21 at 15:55
  • You are right, the browser indeed did not issue a request for favicon, when your code was inncluded in the main html. So my only concern now is im trying to reduce the burden on the CPU (server is a measly 150Mhz CPU) , if i include the code in the main html i am getting an additional 100ms for the transaction. If i not include it and respond to favicon the browser caches the image right>? – DrakeJest Dec 11 '21 at 16:15
  • Yup, but then you need to store it on the file system, so mind your considerations – Lior Pollak Dec 11 '21 at 16:17
  • Is not possible to reply to favicon with a encoded string? – DrakeJest Dec 11 '21 at 16:32
  • It depends on your server configuration. For example, you can set a constant response with nginx. – Lior Pollak Dec 11 '21 at 16:34