How to add Favicons in Django (2024)
Tags: django, favicon, html, tutorial
Published: 2024-06-30 09:31:17

## What is a favicon?
According to W3C: A favicon is a small image displayed next to the page title in the browser tab [More Info & Interactive Tool](https://www.w3schools.com/html/html_favicon.asp)

## How having a favicon helps?


![Example Showing Truncated Tab Titles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5wl6xgsawmfg8mfl4lk.png)

A modern real world scenario is suppose you have a lot of tabs open in your browser (firefox, chrome, safari, etc) while you are multi-tasking on a typical day. 

Notice (in the above given example) how the title shown on the tab becomes truncated because of lack of horizontal real estate. Because different websites have favicons that are usually unique to them, it is very easy for an end-user to visually tell them apart from each other. 

Similarly, they also provide important context in other scenarios like
- While scrolling in 'Browser History'
- While viewing 'Search' results

## Favicons & their different file-formats/methods

![Source: Wikipedia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elhqtdcguavybehm61l9.png)

In the image above, you can see the browser support for the .ico format started pretty early, while the latest addition to the club is the .svg format [More Info](https://en.wikipedia.org/wiki/Favicon#Image_file_format_support)

- Redundant Formats: **.gif, .apng, .jpeg, etc**

In short, don't use these formats, unless you have a very specific need for any of them

- New & Stable Formats: **.ico, .png, .svg & manifest.json**

In this tutorial, we will be focusing on these 3 formats/methods & they will be enough for you in 99% of use cases

## ICO Format

Created in the mid-1980s by Microsoft, this format is the defacto format for favicons. [More Info](https://en.wikipedia.org/wiki/ICO_(file_format))

_**Pros:** Backward Compatibility with very old browsers. Ability to contain multiple images in one file container_
_**Cons:** Can be slightly tricky for some people to edit/manipulate_ 


## PNG Format
PNG is, by far, one of the most commonly used image formats out there. [More Info](https://en.wikipedia.org/wiki/ICO_(file_format)#PNG_format)  

_**Pros:** It has the Widest Acceptance across Devices & Browsers combined, plus 'Transparency' is supported 
**Cons:**It is a Raster Graphic Format, hence the associated issues [More Info](https://youtu.be/-Fs2t6P5AjY?si=JEKFMtnETKzZdeMI)_

## SVG Format
Because it is Vector based, the quality remains sharp at all screen sizes

_**Pros:**Sharp Rendering, No Blurring, Automatic Variable Size_
_**Cons:** Can break backward compatibility on some devices (rare now)_

## Manifest (.json) Format
A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application


_**Pros:**Modularity_
_**Cons:** Can be a bit overwhelming to maintain for beginners_

## Implementation

So **first place the .ico, .png, .svg, & .json file in your static folder**(remember to run the Django 'collectstatic' commnd after that), then in your **base.html** (from which you will extend your other django html templates) add the following:

```html
{% load static %} {# required to load static content #}
<!doctype html>
<html>
<head>

{# ico format, Internet Explorer 9 or below compatible #}
<link rel="shortcut icon" href="{% static 'path/to/myicon.ico' %}">

{# ico format, modern with combined sizes #}
<link rel="icon" type="image/x-icon" href="{% static 'path/to/myicon.ico' %}" sizes="16x16 32x32 64x64">

{# png format with different sizes #}
<link rel="icon" type="image/png" href="{% static 'path/to/myicon_x32.png' %}" sizes="32x32">
<link rel="icon" type="image/png" href="{% static 'path/to/myicon_x192.png' %}" sizes="192x192">

{# png format for Apple touch compatibility #}
{# Size & Name of the image file matters #}
<link rel="apple-touch-icon" href="{% static 'path/to/apple-touch-icon.png' %}" size="180x180">

{# svg format, size doesn't matter since its a Vector Graphic Format #} 
<link rel="icon" type="image/svg+xml" href="{% static 'path/to/myicon.svg' %}" sizes="any">

{# manifest format #}
<link rel="manifest" href="{% static 'path/to/manifest.json' %}" />

{# manifest format, alternative #}
<link rel="manifest" href="{% static 'path/to/app.webmanifest' %}" crossorigin="use-credentials" />

</head>
```
For the manifest method, you can just create a .json file with the following contents

```
{
  "icons": [
    { 
      "src": "path/to/favicon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "path/to/favicon-64.png",
      "type": "image/png",
      "sizes": "64x64"
    }
  ]
}
```

## Closing Comments

As a beginner, just using a single .png format favicon should be enough for you in most situations. Rather, time & effort should be invested into other aspects of your web app other then what favicons to use


## Extra Reading
[More Info on the Html '<link>' Tag & its attributes](https://www.w3schools.com/tags/tag_link.asp)

[Apple Guidelines for Icons](https://developer.apple.com/design/human-interface-guidelines/app-icons)

[More Info on Manifest Format](https://developer.mozilla.org/en-US/docs/Web/Manifest)

[More Info on Django config](https://learndjango.com/tutorials/django-favicon-tutorial)