Django Favicon Tutorial

This tutorial explains how to add a favicon (shortcut icon) to a Django website. A favicon is a small icon that appears at the top of a tab in a web browser.

Here are the four steps required to add a favicon to your Django project:

1. Create a static folder in the project-level directory
2. Register the folder in settings.py
3. Add the favicon to the folder
4. Update HTML templates and load static

ICO vs PNG vs SVG

There are three file types commonly associated with favicons: ICO, PNG, and SVG. In the early days of the world wide web, the only option was an ICO file. Today most web developers use either a PNG or SVG file instead.

PNG icons are compressed and widely used. They have near universal browser support. The only downside is that they are raster-based--made up of tiny pixels--which means multiple sizes are needed to support multiple resolutions.

SVG icons solve this problem by being vector-based, ie. infinitely scalable so a browser can render the same icon at any size. They have majority support in web browsers, with Safari and IE being the lone holdouts.

Favicons can be challenging because SVG doesn't have universal support yet, we need to handle shortcut icons on iOS and Android home screens, and the current use of light/dark themes.

As of this writing, the recommended approach for most Django developers is to use a PNG file, which is what we will cover here.

1. Create a Static Folder in the Project-Level Directory

In Django, the term static files is used to describe additional files served for most websites such as images, JavaScript, and CSS.

Django's local web server will automatically look for static files within a static folder in each app. For example, if you had a blog app, you'd need to create a folder called blog/static and then place any files there. For static files used across the entire project, it is common to create a project-level static folder instead. And since there are multiple types of static files, creating a sub-directory called images helps keep the project organized.

Create a static directory now with an images sub-directory in your text editor.

├── django_project
│   ├── __init__.py
|   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static  # new
│   ├── images

2. Register the Folder in settings.py

The STATICFILES_DIRS setting controls additional locations where Django will look for static files. We need to our new static directory to it.

In your settings.py file, scroll down to the bottom where there is already a configuration for STATIC_URL and add an additional line for STATICFILES_DIRS.

# settings.py
STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"]  # new

3. Add the Favicon

Add your PNG favicon to the static/images folder if you haven't already. A good default size is 64x64 pixels. Browsers normally display favicons at 16x16 or 32x32 pixels, but will automatically scale down a 64x64 pixel icon and the larger size can help with higher resolution.

If you need help finding an icon, the website flaticon has many free ones available. You can download them as a 64x64 PNG. For example, a pony icon will be downloaded as horse.png. Rename it to favicon.png. Here is what it would look like in the file structure.

├── django_project
│   ├── __init__.py
|   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static  
│   ├── images
│       ├── favicon.png. # new

4. Update HTML Templates

The next step is adding the favicon to your HTML files. It's common to have a base.html template that is inherited by all the other files. At the top, add {% load static %} so that static files will be loaded. And then update the HTML head section linking to the horse.png file.

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

And that's it! Start up your local web server and the favicon will appear in the browser tab.

Next Steps

This configuration only works in local development. To learn how to set up static files for deployment, check out the tutorial on Django Static Files and Templates.