Set favicon in django admin

Question

I need to set up a favicon for django admin interface.

It would be best to do it globally, without overriding templates for all apps.

What is the cleanest way to do it? I tried searching Django documentation for this, but found nothing.

Grane

Answer 1

To avoid duplicating anything of the original file, you can actually override the template while extending it (docs). So create your own template/admin/base_site.html:

{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
    <link rel="shortcut icon" href="{% static 'yourapp/img/favicon.ico' %}" />
{% endblock %}

Underpainting

Answer 2

If favicon is in /app/static/img/favicon.ico, link it into the {% block extrahead %} of this file: /app/templates/admin/base_site.html

    {% extends "admin/base.html" %}

    {% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

    {% block extrahead %}
        <link rel="icon" href="{{STATIC_URL}}img/favicon.ico" sizes="48x48" />
    {% endblock %}
    {% block branding %}
        <h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
    {% endblock %}

In settings.py, INSTALLED_APPS be sure your app is listed before django.contrib.admin.

To test get rid of template cache by deleting .pyc files:

$ find . -name \"*.pyc\" -delete".

Works with Django 1.8.12 Firefox, Chrome.

Texas

Answer 3

Extend admin/base.html in your template/admin/base_site.html template and add the favicon link in extrahead block

{% extends "admin/base.html" %}
{% load staticfiles %}

{% block extrahead %}
<link rel="shortcut icon" href="{% static 'relative/path/to/favicon.ico' %}" />
{% endblock %}

Django version >= 2

Mind that the correct import, if using Django 2 or above, is:

{% load static %}

Greenleaf

Answer 4

Override the Django base.html template and put it under admin directory like my_app/templates/admin/base.html.

Add {% block extrahead %} to the overriding template.

   {% extends 'admin/base.html' %}
    {% load staticfiles %}
    {% block javascripts %}
        {{ block.super }}
    <script type="text/javascript" src="{% static 'app/js/action.js' %}"></script>

    {% endblock %}

    {% block extrahead %}
        <link rel="shortcut icon" href="{% static 'app/img/favicon.ico'  %}" />
    {% endblock %}
    {% block stylesheets %}

        {{ block.super }}
    {% endblock %}

Daren

From Django 2.0 and above use {% load static %} instead of {% load staticfiles %} – Honest

Answer 5

The best way who i find is put in urls:

    from django.shortcuts import redirect
    urlpatterns = [
        path('favicon.ico', lambda _ : redirect('static/icons/favicon.ico', permanent=True)),
    ]

This way you have a favicon in all pages, that's include admins and django rest framework (i tested with both) and favicon set with link tag in tamplate staying working.

Courtenay

Easiert and cleanest solution. One thing I added was to get the path for the redirect from the django static template tag. then you can be sure it works even if static settings change. – Puritanism

Answer 6

You can set favicon for Django Admin. *My answer explains how to set favicon for Django.

For example, put favicon.ico in static/ and copy base.html from django/contrib/admin/templates/admin/base.html in your virtual environment to templates/admin/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-my_app1
 |-my_app2
 |-static
 |  └-favicon.ico # Here
 └-templates
    └-admin
       └-base.html # Here

Then, set BASE_DIR / 'templates' to DIRS in TEMPLATES and set BASE_DIR / 'static/' in STATICFILES_DIRS as shown below so that Django can recognize templates and static folders just under django-project. *My answer explains how to set Django Templates and I recommand to set whitenoise following my answer to disable your browser to cache the static files of Django:

# "settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates' # Here
        ],
        ...
    },
]

...

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static/' # Here
]

Lastly, add <link rel="icon" ...> in base.html as shown below:

{# "base.html" #}

<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<link rel="icon" href="{% static 'favicon.ico' %}"/>
{# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
{% block dark-mode-vars %}
  <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
  <script src="{% static "admin/js/theme.js" %}" defer></script>
{% endblock %}

In addition, if favicon is not shown on your browser, use different urls as shown below. *My answer explains it:

http://localhost:8000/...
http://localhost:8001/...
http://localhost:8002/...
http://localhost: :: /...

http://127.0.0.1:8000/...
http://127.0.0.1:8001/...
http://127.0.0.1:8002/...
http://127.0.0.1: :: /...

Crayon