[Solved] How can I get a favicon to show up in my django app?

I just want to drop the favicon.ico in my staticfiles directory and then have it show up in my app.

How can I accomplish this?

I have placed the favicon.ico file in my staticfiles directory, but it doesn’t show up and I see this in my log: - - [21/Feb/2014 10:10:53] "GET /favicon.ico HTTP/1.1" 404 -

If I go to http://localhost:8000/static/favicon.ico, I can see the favicon.

Enquirer: jononomo


Solution #1:

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' %}"/>
Respondent: hanleyhansen

Solution #2:

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.

Respondent: wim

Solution #3:

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.

Respondent: King Leon

Solution #4:

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.

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

Respondent: ePi272314

Solution #5:

In your settings.py add a root staticfiles directory:

        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')))
Respondent: Mustapha-Belkacim

Solution #6:

<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

Respondent: A.Raouf

Solution #7:

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

Also run: python manage.py collectstatic

Respondent: sanka nanaji

Solution #8:

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

Solution #9:

I tried the following settings in django 2.1.1


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


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

Project directory structure


view live here

Respondent: MAK Azad

Solution #10:

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

Solution #11:

Just copy your favicon on:

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" />

Solution #12:

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' %}" />
Respondent: Teo Herman

Solution #13:

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

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

Solution #14:

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 :


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.

Respondent: Alouani Younes

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.