How To Add favicon to Django project

A favicon is that small icon that appears at the top of a tab in a browser. A favicon can make your site look professional almost instantly. In this post, I’ll show you how to add a favicon to your Django project to make it look a bit more professional.

Below is an image of the Coding Gear favicon in Microsoft Edge.

CodingGear is a WordPress website, but in this post, I will show you how to add a favicon to a Django project so it can appear as in the image above.

Follow the steps below to add a favicon to your Django project:

1. Create a folder called static at the root of your Django project
2. Register the folder in the settings.py file
3. Add the favicon to the folder.
4. Load static in your templates
5. Link to the favicon in your HTML head section

I’ll explain each step in detail.

1. Create a folder called static at the root of your Django project

There are multiple ways of telling Django which one the static folder is. One way is to create a folder called static as a subdirectory of an app folder. And another one is to create a static folder at the root of your Django project folder, then register that folder to the STATICFILES_DIRS list in the settings.py file. We’ll go with the latter as it is faster to do and it is more popular among Django developers.

After you create the static folder, your Django project structure should look like the one below:

...
├── static #here
|   └── images 
└── manage.py

Note that because we are dealing with adding a favicon to a Django project, which is itself an image, you have to create yet another sub-directory of the static folder called images, img, imgs or anything that can tell that it is where our image static files are going to be stored. This is where the favicon will be stored and it is done to make our Django project more organized.

2. Register the folder in the settings.py file

We have created the static folder, and now we have to tell Django that the folder is the one that will store our static files. We do this by registering the folder in the list of STATICFILES_DIRS in the settings.py file.

In your settings.py file, add the following line of code below STATIC_URL:

STATICFILES_DIRS = [BASE_DIR/'static']

3. Add the favicon to the folder.

If you have not already, it is time to add the very favicon we want to add to our Django project in the static/images folder. I’m pretty sure you can do that by yourself. If you’re on a Windows computer, you can simply copy and paste, or drag and drop the favicon from its current folder to the static folder of your project in File Explorer. Which should look like this:

According to the screenshot above, my Django project is called movie-reviews and my favicon is located in the path static/images.

In your code editor, it should also reflect as follows:

My favicon is in png format, but it can be in any image format, depending on what you prefer for the Django project.

Since for this Django project I use bootstrap via CDN, There’s only the images folder in my static folder. The rest of the stylings and JS are taken care of by Bootstrap.

4. Load static in your templates

Now that the favicon image is in its folder, it is time to link it to the HTML file. We start by loading static at the top of our HTML file as follows:

{% load static %}

5. Link to the favicon in your HTML head section

In your parent template file is where you should add the link to the favicon since it is the file that is being extended by the rest of the other template files.

In the head section of the HTML code, add the following code:

<link rel="shortcut icon" href="{% static 'images/favicon.png' %}" type="image/x-icon">

The rel is shortcut icon(you can also leave it as just icon), href is linking to the favicon.png file in the static/images folder but note that we are using the static tag to link to the favicon which looks like this: {% static 'link' %}. Where there is link is where we have put the path to our favicon.

Now run your Django development server and check your website out. You should see the favicon has been added to your Django project.

And that my friends, is how we add a favicon to a Django project. The configuration above only works during development, if you want to deploy your Django project, check out my post on Django collectstatic.

If you have any questions, you’re welcome in the comments section.