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
Top comments (1)
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'