218

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:

127.0.0.1 - - [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.

3
  • 9
    The error is GET /favicon.ico not GET /static/favicon.ico looking in http://localhost:8000/static/favicon.ico is not related. It looks like some browsers requests for /favicon.ico despites the HTML.
    – freezed
    Commented Nov 4, 2018 at 0:29
  • @freezed, agree depends on browsers. and I don't like the solution with static, we must check favicon.ico framework/agreement for all browsers. Commented Jan 19, 2021 at 13:11
  • 1
    Here is a complete tutorial : learndjango.com/tutorials/django-favicon-tutorial
    – Sunchock
    Commented Sep 15, 2022 at 14:54

23 Answers 23

238

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' %}"/>
13
  • 3
    Sounds like a good idea. Can you point me to a link that explains how to do this?
    – tadasajon
    Commented Feb 21, 2014 at 15:14
  • 3
    Yeah. Something like: {{STATIC_URL}}favicon.ico
    – karthikr
    Commented Feb 21, 2014 at 15:15
  • 18
    That's just an example. Modify it to fit your needs. Commented Feb 21, 2014 at 15:42
  • 3
    This answer didn't work for me but other answers that used href="{% static 'favicon.ico' %} did.
    – Bezewy
    Commented Nov 16, 2015 at 1:08
  • 10
    MIME type (image/png) and file format (favicon.ico) doesn't match.
    – x-yuri
    Commented Aug 9, 2018 at 12:03
162

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.

5
  • 4
    I don't see how this is lightweight, compared to adding two lines to template. And this is kind of trick I wouldn't use in production.
    – x-yuri
    Commented Aug 9, 2018 at 11:57
  • 27
    @x-yuri The other answer is easier, if you have a base template at all. The point is you might not have any template or static content, so STATIC_URL may not even be configured. e.g. it's a json API. but still want a browsable API without seeing 404 errors in your logs (chrome etc will try to request favicon.ico automatically). There is no harm to use such a RedirectView in production.
    – wim
    Commented Aug 9, 2018 at 14:04
  • Should url='/static/favicon.ico' not be constructed dynamically, like as url=settings.STATIC_URL + 'favicon.ico' ? If I understand correctly, the proposed solution will only work as intended when in the settings.py file we have STATIC_URL='/static/. Commented Oct 7, 2020 at 8:08
  • @wim how would you apply this method to redirect a number of favicon formats so they are accessible in the root dir? e.g. you might have 10x apple touch sizes you want to deliver.
    – alias51
    Commented Jan 5, 2022 at 18:51
  • This is actually a good answer as some browsers look for /favicon.ico regardless of what is stated in the html file. Commented Jun 1, 2022 at 3:11
73

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.

43

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')))
]
2
  • Hey. This seems to be the only way for me to display favicon - so thanks. But I still don't understand few things. 1: I don't seem to have to have the base.html change - favicon works without it. 2: urls.py change seems crucial, but I don't understand why I have to do this. Shouldn't the file be served by webserver ? That's why we need to do collectstatic, right ?
    – callmebob
    Commented Apr 6, 2022 at 15:06
  • 1:because not all browsers can find the favicon if it's not declared in the html 2: as mentioned in the answer modern browsers look for favicon in that url Commented Apr 7, 2022 at 9:06
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!"

3
  • 1
    Tipp: favicon.ico didnt do it for me, after testing with .png extension it worked!
    – kaya
    Commented Sep 3, 2018 at 9:59
  • You are right @kaya. The .ico format is not the best regarding compatibility. However .png always work.
    – ePi272314
    Commented Sep 4, 2018 at 13:43
  • 1
    saying file not found Commented Sep 7, 2021 at 7:30
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

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

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

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

Also run: python manage.py collectstatic

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 %}
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' %}" />
1
  • I left my favicon directly inside static/. It turns out you need to have a folder between static/ and the icon. Now doing your method works!
    – Song Yang
    Commented Jul 12, 2021 at 19:45
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.

1

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

<head>
<base href="https://www.example.com/static/"> 
</head>
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" />
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 😊 ~

1
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.

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: :: /...
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))
]
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.
0

Just adding another point, according to MDN web docs, "The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore." So, rel="icon" should be enough.

0

To actually put the favicon at the root of the server in development you do:

from django.urls import re_path
from django.views.static import serve

urlpatterns += [
    re_path(r'^(?P<path>favicon\.ico)$', serve, {'document_root': settings.BASE_DIR / 'path/to/favicon/'})
]

Notice I'm using django.views.static.serve not django.contrib.staticfiles.views.serve

-3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.