How to Fix the Broken Favicon in Django
This article introduces how to set a new favicon or fix the broken favicon in the Django app.
The word favicon stands for the Favorite icon. It is an icon in the browser tab at the left of the app title.
Here, you can also see the logo of the DelftStack in your current browser tab as a favicon. In short, the favicon represents your brand with your app title.
In general, the Django app looks for the favicon.ico path in the urls.py file, and if it doesn’t find it, it sets the default HTML icon.
Below, we have explained how Django developers can set a custom favicon for the web app.
Fix the Broken Favicon in Django
Before we start to fix the broken favicon, users must have started the new Django project and created a new app inside that. Also, ensure users have set up the urls.py file of the project and app.
Now, we will add the static directory to our Django project and store images and icons inside that.
Users need to open the terminal in the current project directory and enter the below command to create a new static directory.
mkdir static
Now, download the favicon from the internet and store it in your app’s static directory. Also, users can copy and paste the favicon from another location to the static directory if it resides in their local computer.
Now, open the settings.py file to add the path for your app’s static directory. Add the below code at the end of the settings.py file.
In the code below, /static/ represents the name of the directory you need to make static and BASE_DIR represents your project directory.
settings.py:
import os
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Also, users have to ensure that 'django.contrib.staticfiles', is added into the INSTALLED_APPS array inside the settings.py file. Users can observe how it is added to INSTALLED_APPS in the image below.
Next, we assume that users have a base template or any single template inside the app. Users must load the static directory inside the HTML template.
Users add the below code at the top of the HTML file to load the static directory.
{% load static %}
Now, users have to add some HTML code inside the template. To set up a custom favicon, users can add the below code to the <head> tag of the HTML template.
In the below code, we have used the <link> tag to add a favicon. The rel attribute of <link> specifies the relationship between the current and loaded documents.
We have taken the shortcut icon as a value, representing the favicon. In the href attribute, we have added the image URL with the static keyword to load it from the static directory.
<link rel="shortcut icon" type="image/png" href="{% static '<Relative Icon Path In Static Directory>' %}"/>
Below, users can see the full HTML template code.
{% load static %}
<!doctype html>
<html lang="en">
<head>
<title>Setup New Favicon In Django</title>
<link rel="shortcut icon" type="image/png" href="{% static 'delftstack.jpg' %}"/>
</head>
<body>
<h1>Welcome to DelftStack!</h1>
</body>
</html>
Users can see the favicon at the left of the title when they run the app. In the below output image, users can see the logo of DelftStack as a favicon.
We have successfully learned to fix the broken favicon in Django. Furthermore, users can set up different favicons for every template.
They need to change the image path inside the <link> tag and add it to a particular template’s <head> section.
