DEV Community

Ahmad Bilal
Ahmad Bilal

Posted on • Updated on

How to add Favicons in Django (2024)

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?

Example Showing Truncated Tab Titles

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

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>
Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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 '' Tag & its attributes

Apple Guidelines for Icons

More Info on Manifest Format

More Info on Django config

Top comments (1)

Collapse
 
someab profile image
Ahmad Bilal

Update: Replaced Html style comments with Django Style comments, as they don't show up in final rendering on the end-user i.e., not visible in 'view page-source'