A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.
Why should we use favicons:
Favicons are like brand logos. Just like how brand logos make it easier to identify the brand quickly, favicons make it easier to identify your website easily.
In browsing the history section of Google Chrome, the only thing that makes it easier to find the particular link are the colorful little favicons. Take a look at a sample screenshot below:
Favicons not only help in branding but are useful in SEO.
Creating favicon:
You can use any freely available online tool to generate favicon.Generally, the size of favicons is 16x16 or 32x32 pixels. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
Including Favicon in Django website:
To show favicon on your Django website, you need to put below the line of code in the head section of the HTML code.
<link rel="icon" href="{% static 'app-name/img/favicon.ico' %}" type="image/x-icon">
For the above link to work, we need to follow below steps:
- Create a directory static in your project structure.
- In this directory create another directory with the name same as your app name
- Inside this directory create three directories, js for keeping javascript files, CSS for keeping CSS files and img for keeping images. This is optional. You can keep all three types of files in one directory as well.
- Put the icon in the directory created in the above step. Path to icon file will be: project->app->static->app-name->img->icon.
- In your settings file, define the below variables.
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
- Upload your website on the hosting server and run the below command.
python manage.py collectstatic
Since devices differ in resolution, we might have to create different favicons with different resolutions. For further details please refer https://www.w3.org/.
