title: How to respond to a GET request for favicon.ico in a local webserver using sockets
body: <p>I have created my own webserver using python and its built-in module sockets, now when I run the code the browser asks for <code>favicon.ico</code> earlier I was silencing it but now I decided to give a <code>favicon.ico</code> file to the browser but it doesn't seem to be working</p>
  <p>server.py</p>
  <pre class="lang-py prettyprint-override"><code>...
  SERVER_HOST = '0.0.0.0'
  SERVER_PORT = 8000
  
  
  server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
  server_socket.bind((SERVER_HOST, SERVER_PORT))
  server_socket.listen(1)
  ...
  while True:
      client_connection, client_address = server_socket.accept()
      request = client_connection.recv(1024).decode()
      ...
  
      response = 'HTTP/1.1 200 OK\r\n'
      # the code here is a little bit clustered, I will fix it when I solve this favicon problem
      if filename == '/':
          filename = '/index.html'
      if filename != &quot;/favicon.ico&quot;:
          response += &quot;Content-Type: text/html\r\n&quot;
          with open(f&quot;htdocs/{filename}&quot;) as f:
              data = f.read()
          response += f&quot;Content-Length: {len(data)}\r\n\r\n{data}&quot;
          client_connection.sendall(response.encode())
      else:
          with open(f&quot;htdocs/{filename}&quot;, &quot;rb&quot;) as f:
              data = f.read()
          response += f&quot;Content-Type: image/x-icon\r\nContent-Length: {len(data)}\r\n\r\n&quot;
          response += (base64.b64encode(data)).decode('utf-8')
          client_connection.sendall(response.encode())
      client_connection.close()
  </code></pre>
  <p>Folder Structure</p>
  <pre><code>/Webserver$ ls
  htdocs  server.py  venv
  /Webserver$ ls htdocs
  favicon.ico  home.html  index.html
  </code></pre>
  <p>index.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;Index&lt;/title&gt;
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
      &lt;p&gt;Welcome to the index.html web page..&lt;/p&gt;
      &lt;p&gt;Here's a link to &lt;a href=&quot;home.html&quot;&gt;home&lt;/a&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qhmj1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qhmj1.png" alt="enter image description here" /></a> here the <code>favicon.ico</code> is even sent as <code>image/x-icon</code> but it is not displyed.</p>
  <p>The <code>htdocs/favicon.ico</code> has dimensions 16x16</p>
  <p><a href="https://i.stack.imgur.com/u895F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u895F.png" alt="enter image description here" /></a></p>