How to add Favicons in Django (2024)

Ahmad Bilal — Sun, 30 Jun 2024 09:31:17 +0000

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

How having a favicon helps?

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

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

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

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

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

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:

{% 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

DEV Community: Ahmad Bilal