Responding to GET /favicon.ico request does not show the browser tab icon

Viewed 361

I have a webserver since my main HTML page does not contain a webicon, (just a basic template)

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

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Title of the document</title>
    </head>
    
    <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
    </body>
    </html>

Both chrome and Mozilla will also send an additional HTTP request :

GET /favicon.ico

I would like to respond to this request by sending a PNG file, problem is the tab icon is not showing up even If I successfully return to the /favicon.ico request.

Ny response to GET /favicon.ico looks like this:

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

  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAB0CAYAAABzNJfPAAAABGdBTUEAALGP.... 

But the icon does not show up on the tab bar. I am getting this:

enter image description here

What I was expecting is for the icon to show up in the tab like this

enter image description here

You might say just include the icon in the main HTML. But that would be "cheating" since what I am setting out to do is to handle a /favicon.ico requests from browsers. If I do that I would just be avoiding the issue, not addressing it

1 Answers

Your content-type header is set to text/plain which makes the browser read it as plain text, not an image. Try setting it to image/png. Also, don't send the image as base64, just send the raw image. I'm not sure what web server you are using so I can't help you with how to send it as a raw image.

Related