[Django]-How to get a favicon to show up in my django app?

by

233👍

If you have a base or header template that’s included everywhere why not include the favicon there with basic HTML?

<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
👤hanleyhansen

158👍

One lightweight trick is to make a redirect in your urls.py file, e.g. add a view like so:

from django.views.generic.base import RedirectView

favicon_view = RedirectView.as_view(url='/static/favicon.ico', permanent=True)

urlpatterns = [
    ...
    re_path(r'^favicon\.ico$', favicon_view),
    ...
]

This works well as an easy trick for getting favicons working when you don’t really have other static content to host.

👤wim

71👍

In template file

{% load static %}

Then within <head> tag

<link rel="shortcut icon" href="{%  static 'favicon.ico' %}">

This assumes that you have static files configured appropiately in settings.py.

Note: older versions of Django use load staticfiles, not load static.

👤King Leon

39👍

Universal solution

You can get the favicon showing up in Django the same way you can do in any other framework: just use pure HTML.

Add the following code to the header of your HTML template.
Better, to your base HTML template if the favicon is the same across your application.

<link rel="shortcut icon" href="{% static 'favicon/favicon.png' %}"/>

The previous code assumes:

  1. You have a folder named ‘favicon’ in your static folder
  2. The favicon file has the name ‘favicon.png’
  3. You have properly set the setting variable STATIC_URL

You can find useful information about file format support and how to use favicons in this article of Wikipedia https://en.wikipedia.org/wiki/Favicon.
I can recommend use .png for universal browser compatibility.

EDIT:
As posted in one comment,
“Don’t forget to add {% load staticfiles %} in top of your template file!”

👤ePi272314

39👍

In your settings.py add a root staticfiles directory:

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

Create /static/images/favicon.ico

Add the favicon to your template(base.html):

{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>

And create a url redirect in urls.py because browsers look for a favicon in /favicon.ico

from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView

urlpatterns = [
    ...
    path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url('images/favicon.ico')))
]
👤Mustapha-Belkacim

12👍

First

Upload your favicon.ico to your app static path， or the path you configured by STATICFILES_DIRS in settings.py

Second

In app base template file:

{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>

You can make apps use different favicon.ico files here.

Addition

In project/urls.py

from django.templatetags.static import static # Not from django.conf.urls.static 
from django.views.generic.base import RedirectView

Add this path to your urlpatterns base location

path('favicon.ico', RedirectView.as_view(url=static('favicon.ico'))),

This can let installed app(like admin, which you should not change the templates) and the app you forget modify the templates , also show a default favicon.ico

👤tinyhare

10👍

<link rel="shortcut icon" href="{% static 'favicon/favicon.ico' %}"/>

Just add that in ur base file like first answer but ico extension and add it to the static folder

👤A.Raouf

6👍

if you have permission then

Alias /favicon.ico /var/www/aktel/workspace1/PyBot/PyBot/static/favicon.ico

add alias to your virtual host. (in apache config file ) similarly for robots.txt

Alias /robots.txt /var/www/---your path ---/PyBot/robots.txt
👤Saurabh Chandra Patel

6👍

I tried the following settings in django 2.1.1

base.html

<head>
  {% load static %}
  <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
</head>

settings.py

 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 STATIC_URL = '/static/'` <br>`.............

Project directory structure

Image

view live here

👤MAK Azad

6👍

        <link rel="shortcut icon" type="image/png" href="{% static 'favicon/sample.png' %}" />

Also run: python manage.py collectstatic

👤sanka nanaji

3👍

The best solution is to override the Django base.html template. Make another base.html template under admin directory. Make an admin directory first if it does not exist. app/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

3👍

Came across this while looking for help. I was trying to implement the favicon in my Django project and it was not showing — wanted to add to the conversation.

While trying to implement the favicon in my Django project I renamed the ‘favicon.ico’ file to ‘my_filename.ico’ –– the image would not show. After renaming to ‘favicon.ico’ resolved the issue and graphic displayed. below is the code that resolved my issue:

<link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.ico' %}" />
👤Teo Herman

1👍

Best practices :

Contrary to what you may think, the favicon can be of any size and of any image type. Follow this link for details.

Not putting a link to your favicon can slow down the page load.

In a django project, suppose the path to your favicon is : 

myapp/static/icons/favicon.png

in your django templates (preferably in the base template), add this line to head of the page :

<link rel="shortcut icon" href="{%  static 'icons/favicon.png' %}">

Note :

We suppose, the static settings are well configured in settings.py.

👤Alouani Younes

1👍

Once configured the settings.py by adding

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

Copy your favicon on:
/yourappname/mainapp(ex:core)/static/mainapp(ex:core)/img

Then go to your mainapp template(ex:base.html)
and just copy this, after {% load static %} because you must load first the statics.

<link href="{% static 'core/img/favi_x.png' %}" rel="shortcut icon" type="image/png" />
👤colidom

1👍

Now(in 2020),
You could add a base tag in html file.

<head>
<base href="https://www.example.com/static/"> 
</head>
👤Ved Nig

0👍

I had issues regarding this one. But it has been resolved.
Make sure you have your directories correctly. For example, you have your images in this flow "templates–>users–>static–>images–>your-image.jpg".

** settings.py **

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

** base.html **

{% load static %}
<img src="{% static 'images/your-image.jpg' %}" alt="Your Image">

I hope this helps 😊 ~

👤MARU

0👍

For me I needed to add another set of static variables in settings.py. I tried most answers above and moved my static folder into various locations, it always results in a 404.

settings.py

What was required and not mentioned above was:

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

Everything else as above in other answers:

template/html file

in the head section:

{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>

urls.py

urlpatterns = [
    ...
    path("favicon.ico", RedirectView.as_view(url='static/favicon.ico')),
    ...

edit: this SO page had the most relevant answers to my problem, however the favicon was still not showing. No other answer here addresses STATICFILES_DIRS directly. Several people mention about settings.py and the need to have the statics set up (eg STATIC_URL and others), however setting STATICFILES_DIRS was an immediate fix. It seems to be mentioned specifically only in the lower voted answers.

👤Madivad

0👍

You can show favicon on your browser with Django Development server. *My answer explains how to set favicon in Django Admin.

For example, there is favicon.ico in static/ and there is base.html in templates/ as shown below:

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

Then, set BASE_DIR / 'templates' to DIRS in TEMPLATES and set BASE_DIR / 'static/' in STATICFILES_DIRS in settings.py 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" ...> to <head></head> in base.html as shown below:

{# "base.html" #}

<head>
...
<link rel="icon" href="{% static 'favicon.ico' %}"/> {# Here #}
...
</head>

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

0👍

The best solution:

from django.urls import path
from django.views.generic.base import RedirectView
from .views import *
from django.templatetags.static import static


urlpatterns = [
     ...
]

urlpatterns += [
    path("favicon.ico", RedirectView.as_view(url=static("favicon.ico"), permanent=True))
]
👤Vlad Marchenko

0👍

This is an implementation that keeps favicon.ico at the website root path and does not touch the standard Django templates:

  1. Place the favicon.ico file in a place accessible by collectstatic, so that it will be installed as ${STATIC_ROOT}/favicon.ico:

    $ ls tax_refund/static/favicon.ico
tax_refund/static/favicon.ico
$ ./manage.py collectstatic
(...)
$ ls static/favicon.ico
static/favicon.ico

  2. For the built-in development server, add the favicon.ico route (it will be ignored by the production server):

from django.contrib.staticfiles import views

(...)
urlpatterns += [
    path('favicon.ico', lambda req: views.serve(req, 'favicon.ico'))
]
  1. For the production server, directly serve it at the root path:
  • uwsgi: --static-map /favicon.ico=static/favicon.ico
  • nginx: location /favicon.ico { alias static/favicon.ico; }
  • etc.
👤hdante

-2👍

Sometimes restarting the server helps.

  1. Stop the server and then rerun the command: python manage.py runserver

  2. Now your CSS file should be loaded.

👤Utkarsh-29

Leave a comment