2

I have been trying for the last 45 minutes to figure out how to get my favicon on my flask page.

Here is my current code:

from flask import Flask, render_template, send_from_directory, url_for
import os

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/store")
def store():
    return render_template("store.html")

@app.route("/games")
def games():
    return render_template("games.html")

@app.route("/americanstudios")
def americanstudios():
    return render_template("as.html")

@app.route("/pear")
def pear():
    return render_template("pear.html")

@app.route("/favicon.ico")
def fav():
    return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico',     minetype='image/vnd.microsof.icon')

if __name__ == "__main__":
    app.run(debug=True)

With the base html being this:

<!DOCTYPE html>
<html>
  <title>{% block title %}{% endblock %}</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-    awesome.min.css">

  <head>
    <link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}">
  </head>

  <style>
  body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
  </style>

  <body class="w3-light-grey">
    <!-- Navigation Bar -->
    <div class="w3-bar w3-white w3-large">
      <a href="/" class="w3-bar-item w3-button w3-red w3-mobile"></i>newtech</a>
      <a href="store" class="w3-bar-item w3-button w3-mobile">Store</a>
      <a href="games" class="w3-bar-item w3-button w3-mobile">Games</a>
      <a href="americanstudios" class="w3-bar-item w3-button w3-mobile">American Studios</a>
      <a href="pear" class="w3-bar-item w3-button w3-mobile">PEAR Electronics</a>
      <a href="login" class="w3-bar-item w3-button w3-right w3-light-grey w3-mobile">Log In</a>
  </body>

  <div class="w3-main" style="margin-left:250px">
    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
          {% block content %}
          {% endblock %}
        </div>
    </div>
  </div>
</html>

And this is index.html

{% extends "base.html" %}
{% block title %}newtech inc.{% endblock %}
{% block content %}
<h1 class="w3-text-teal">Home</h1>
<p>Welcome to newtech inc, where we have the coolest new items for all purposes. Whether it's a new     movie to watch, or a fun game, or maybe something else, we're here for you.</p>
{% endblock %}

The only line in head in base.html should load my favicon from the static folder as the favicon for the page. But for some reason, the favicon stays as the default favicon for the index page and all other pages.

My favicon is a 64 X 64 .ico file

favicon img

And it is located in my static folder

favicon in folder

And yes the static folder is in the same directory as main.py

static folder in main.py directory

But even with all of this the favicon still does not show up.

website's favicon

And yes I am running the correct main.py

powershell output

Also tried this code

Yet no luck. Can anyone help me?

Zachary
  • 532
  • 3
  • 12
  • May not be the problem, but your `` tags are misplaced. – Dave W. Smith Apr 16 '21 at 03:24
  • How are they misplaced? – Zachary Apr 16 '21 at 03:41
  • to look for network error, you would need to look at the network tab of the dev tools. it shows that your get for favicon.ico is failing with 404. fix? add static folder to your app app = Flask(__name__, static_folder='static'), and the add get for favicon : @app.route("/static/favicon.ico") def fav(): #return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', minetype='image/vnd.microsof.icon') return send_from_directory(app.static_folder, 'favicon.ico') -- pls let me know if this does not work for you. – simpleApp Apr 16 '21 at 04:08
  • link, style, and meta all belong in side head. html5 is mostly tolerant about them being outside, but you may run in to tooling that isn't. – Dave W. Smith Apr 17 '21 at 16:45

2 Answers2

4

to look for network error, you would need to look at the network tab of the dev tools. it shows that your get for favicon.ico is failing with 404. fix? add static folder to your app (refer 1 in code), and the add get for favicon and return the file - refer 2 in code.

from flask import Flask,render_template,send_from_directory
app = Flask(__name__, static_folder='static') # 1 ( either add here or add through some os join)
import os

@app.route("/")
def home():
    return render_template("index.html")


@app.route("/static/favicon.ico") # 2 add get for favicon
def fav():
    print(os.path.join(app.root_path, 'static'))
    return send_from_directory(app.static_folder, 'favicon.ico') # for sure return the file

if __name__=="__main__":
    app.run(debug=True)

the folder structure will be like :
enter image description here

simpleApp
  • 2,885
  • 2
  • 10
  • 19
  • thank you for you response. I did get a network error: :5000/static/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (NOT FOUND) then the file not found was :5000/static/favicon.ico:1 – Zachary Apr 16 '21 at 04:17
  • are you still getting 404? if so you would need to add get for this endpoint: "/static/favicon.ico" – simpleApp Apr 16 '21 at 04:27
  • just figured it out. The favicon was in an invalid format. It had alpha channels and was 64X64 and not 16X16. Thanks for all your help :) – Zachary Apr 16 '21 at 04:27
1

Did you check out the Flask documentation already? They recommend a slightly different reference than what you have there:

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/?highlight=favicon

eriblexp
  • 41
  • 3