Django Favicon Instructions

What is Favicons
A favicon is a small, iconic image that represents your website. This is a kind of visiting card so it should be created in the same style as the site because the main function of such branded icons is to visualize the website’s main functions in one little image.

Why should I use them?
The main reason your website should have a favicon icon is helping your users. It is much easier to find the needed bookmark by image, associated with a certain website, rather than looking through different URLs. Today, you can find favicon used by all popular and modern websites and browsers in its browsing tabs.

intro

How to create a favicon and add them to your Django site

The easiest way is just to go to https://www.favicon-generator.org/ to generate favicons for all devices. There you follow simple instructions and at the end you will get something like this:

favicons example

Download the zip archive and unpack into your folder with static data. If you don’t know which one it is the folder specified as STATIC_ROOT in yoursettings.py`. If you don’t have set it up then you can add the following to your settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = '../static'
STATICFILES_DIRS = [os.path.join(BASE_DIR, '..', 'static')]

and put the favicons into ../static/favicons.

In your base.html include your favicons inside <head></head> tags, using:

{% load static %}
<link rel="apple-touch-icon" sizes="57x57" href="{% static 'favicons/apple-icon-57x57.png' %}">
<link rel="apple-touch-icon" sizes="60x60" href="{% static 'favicons/apple-icon-60x60.png' %}">
<link rel="apple-touch-icon" sizes="72x72" href="{% static 'favicons/apple-icon-72x72.png' %}">
<link rel="apple-touch-icon" sizes="76x76" href="{% static 'favicons/apple-icon-76x76.png' %}">
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'favicons/apple-icon-114x114.png' %}">
<link rel="apple-touch-icon" sizes="120x120" href="{% static 'favicons/apple-icon-120x120.png' %}">
<link rel="apple-touch-icon" sizes="144x144" href="{% static 'favicons/apple-icon-144x144.png' %}">
<link rel="apple-touch-icon" sizes="152x152" href="{% static 'favicons/apple-icon-152x152.png' %}">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicons/apple-icon-180x180.png' %}">
<link rel="icon" type="image/png" sizes="192x192"  href="{% static 'favicons/android-icon-192x192.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="96x96" href="{% static 'favicons/favicon-96x96.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicons/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'favicons//manifest.json' %}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{% static 'favicons/ms-icon-144x144.png' %}">
<meta name="theme-color" content="#ffffff">

And that’s that easy! Next time you’ll go to your site you’ll see your beautiful favicons!

final

Advantages of using apiJack

With apiJack you get all a vast amount of functionality at your fingertips without any problems. We have went the extra mile to simplify and document our API so all functionality should be workable within minutes instead of hours. Errors are standardized and documented. If you can't get it to work, there is free techinical support at mail@apijack.com where a engineer will respond back within 24 hours.