I will assume that you already have a Django web app set up, so we will dive right into how to add a page title and favicon to a Django website.

We only need two lines of code to do this.

Page Title

Let’s start with the page title. If you are using the local server, you should have something similar to this when running.

To change the page title, add the following line of code at the top your HTML template.

If you have any imports at the top, add the line after the imports.

I chose the name of my app (DEVBALT) for this example.

<title>DEVBALT</title>


 <!-- baltlogs.com-->

After refreshing the page, you should see the page title.

There are two ways to do this. You can create a base template and have one page title for all pages of the website, or you can add a page title to each template depending on the page.

For example, I chose to display the name of my website (DEVBALT) for all pages on my website. However, you can choose to display CONTACT for the contact page, BLOG for the blog page, etc.

Favicon

Let’s tackle the favicon.

Django uses a variation of HTML templates which makes it easy to add the favicon. However, the line below won’t work.

<title>DEVBALT</title>

<link rel="shortcut icon" type="image/png" href="img/favicon.png">


 <!-- baltlogs.com-->

First, we need to set up static files for the website.

If you already did this, you can skip this part.

If not, follow the tutorial below to set up static files.

Create a new folder named img inside the static folder.

Move your favicon file (png or any other acceptable format) into the img folder.

Depending on the browser, you’ll see a default icon next to the name of the website.

If using Google Chrome, you’ll see a planet as the default icon showing next to the name of the website.

Change the line shown earlier to the following.

<title>DEVBALT</title>

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


 <!-- baltlogs.com-->

In the above line, we added the path to the favicon file in a way that Django understands.

Now if you refresh the website, you should see the favicon appear.