favicon.ico results in 404 error in flask app - html

Question

I found a lot of entries in my logfile, which indicate that somebody tried to load /favicon.ico and similar files
GET - /favicon.ico
GET - /apple-touch-icon.png
GET - /apple-touch-icon-precomposed.png
I read a lot about this issue online, but I can't get rid of it. Here is what I trued. First I added the following to my head tag
<link rel="shortcut icon" href="/static/favicon/favicon.ico" type="image/x-icon">
However, even though I provide this information in my header, there seem to be browsers out there which don't care about it and still call /favicon.ico?
So I thought just putting the ico file at root and be done with it, but it does not seem to work? If I call
http://localhost:5000/static/favicon/favicon.ico
I get to the icon, but
http://localhost:5000/favicon.ico
Does not work (gives 404)? I cleared my cache and tried it with Chrome and Safari, but I get 404 in both cases? I am really at a loss here. If I move the image in the static folder and call
http://localhost:5000/static/favicon.ico
it works, but the root folder doesn't? What am I missing here?

Answer 1

By default, the flask will only serve files on the /static endpoint. You can add a custom view to handle the default /favicon request.
The flask documentation has some more information on this subject:
https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/
import os
from flask import send_from_directory
#app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', mimetype='image/vnd.microsoft.icon')

Answer 2

I ran into a very similar problem. I do not have the necessary points to add a comment to the answer yet. So I'll do it using "Your answer". For those who need a much more specific answer on how to use url_for () here is one way to do it.
<!-- Adding a favicon icon to Flask app -->
<!-- SEE: https://favicon.io/favicon-converter/-->
<link rel="shortcut icon"
href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="apple-touch-icon"
sizes="180x180"
href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon"
type="image/png"
sizes="180x180"
href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon"
type="image/png"
sizes="16x16"
href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="manifest"
href="site.webmanifest">
To generate the necessary files use the following link: https://favicon.io/favicon-converter/ All files were copied into the /static directory.