[Django]-Set favicon in django admin

by

27👍

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 %}
👤th3hamm0r

26👍

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.

👤user3526918

10👍

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 %}
👤Antstud

5👍

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 %}
👤Basant Kumar

1👍

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.

👤Eloy Pires

1👍

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: :: /...
👤Super Kai – Kazuya Ito

Leave a comment