How to get a favicon to show up in my django app?

Question

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.

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, Nov 04 '18 at 00: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. — NegaOverflow, Jan 19 '21 at 13:11
Here is a complete tutorial : https://learndjango.com/tutorials/django-favicon-tutorial — Sunchock, Sep 15 '22 at 14:54

score 232 · Answer 1 · edited Dec 10 '18 at 14:35

232

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

edited Dec 10 '18 at 14:35

FlipperPA

13,607
4
39
71

answered Feb 21 '14 at 15:13

hanleyhansen

6,304
8
37
73

3

Sounds like a good idea. Can you point me to a link that explains how to do this? – tadasajon Feb 21 '14 at 15:14
3

Yeah. Something like: `{{STATIC_URL}}favicon.ico` – karthikr Feb 21 '14 at 15:15
Edited answer with @karthikr's suggestion. – hanleyhansen Feb 21 '14 at 15:15
2

My favicon is not a .png file. – tadasajon Feb 21 '14 at 15:34
18

That's just an example. Modify it to fit your needs. – hanleyhansen Feb 21 '14 at 15:42
3

This answer didn't work for me but other answers that used `href="{% static 'favicon.ico' %}` did. – Bezewy Nov 16 '15 at 01:08
@user568021 You have other templates "extend" the base template. Your non-base templates then look like: `{% extends "app/base.html" %} {% block BLOCK_NAME %} ...actual content... {% endblock %}` – Nick Chapman Jan 02 '16 at 08:39
@NickChapman sorry for not being clear. that was not my question. By now I learned that you can 'include' other themplate files like this: {% include "appname/header.html" %} .. that was it. – user568021 Jan 02 '16 at 09:39
Using {{STATIC_URL}} is not best practices, see for example http://staticfiles.productiondjango.com/blog/stop-using-static-url-in-templates/ . Use {% load static %} and – Niko Föhr Aug 11 '17 at 17:01
But if the favicon.ico won't show up if we request some static files. – jhd Jun 05 '18 at 07:51
7

MIME type (`image/png`) and file format (`favicon.ico`) doesn't match. – x-yuri Aug 09 '18 at 12:03
1

And don't forget to load static `{% load static %}` in the beginning of HTML template. – paveldroo Feb 19 '20 at 11:59

score 155 · Answer 2 · edited Dec 10 '18 at 14:34

155

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.

edited Dec 10 '18 at 14:34

FlipperPA

13,607
4
39
71

answered Feb 21 '14 at 15:21

wim

338,267
99
616
750

3

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 Aug 09 '18 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 Aug 09 '18 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/`. – Rabarberski Oct 07 '20 at 08: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 Jan 05 '22 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. – Herman Martinus Jun 01 '22 at 03:11

score 71 · Answer 3 · edited Mar 15 '19 at 19:34

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.

edited Mar 15 '19 at 19:34

Brad Solomon

38,521
31
149
235

answered Aug 07 '15 at 12:41

King Leon

1,154
12
21

ePi272314 · Answer 4 · 2018-09-04T13:55:54.317

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:

You have a folder named 'favicon' in your static folder
The favicon file has the name 'favicon.png'
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!"

edited Sep 04 '18 at 13:55

answered Sep 13 '15 at 14:45

ePi272314

12,557
5
50
36

1

Tipp: favicon.ico didnt do it for me, after testing with .png extension it worked! – kaya Sep 03 '18 at 09:59
You are right @kaya. The .ico format is not the best regarding compatibility. However .png always work. – ePi272314 Sep 04 '18 at 13:43
1

saying file not found – Kashif Iftikhar Sep 07 '21 at 07:30

score 39 · Answer 5 · edited Aug 22 '19 at 21:34

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')))
]

edited Aug 22 '19 at 21:34

Harry Moreno

10,231
7
64
116

answered Jul 15 '19 at 15:10

Mustapha-Belkacim

1,653
1
15
19

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 Apr 06 '22 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 – Mustapha-Belkacim Apr 07 '22 at 09:06

tinyhare · Answer 6 · 2022-11-23T07:45:14.913

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

score 10 · Answer 7 · answered May 11 '17 at 13:08

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

answered May 11 '17 at 13:08

A.Raouf

2,171
1
24
36

score 6 · Answer 8 · answered Jan 13 '15 at 12:10

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

answered Jan 13 '15 at 12:10

Saurabh Chandra Patel

12,712
6
88
78

score 6 · Answer 9 · edited Jun 20 '20 at 09:12

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

view live here

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 16 '18 at 05:07

MAK Azad

73
1
7

sanka nanaji · Answer 10 · 2020-04-22T02:40:11.683

6

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

Also run: python manage.py collectstatic

edited Apr 22 '20 at 02:40

answered Apr 20 '20 at 20:37

sanka nanaji

61
1
4

score 3 · Answer 11 · answered Jun 08 '17 at 06:34

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

score 3 · Answer 12 · answered Oct 17 '20 at 13:52

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

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, Jul 12 '21 at 19:45

score 1 · Answer 13 · answered Feb 15 '19 at 15:09

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.

score 1 · Answer 14 · answered Sep 03 '19 at 13:23

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

score 1 · Answer 15 · answered Dec 31 '20 at 12:50

1

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

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

answered Dec 31 '20 at 12:50

Ved Nig

59
11

score 0 · Answer 16 · answered Apr 17 '23 at 03:07

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 ~

answered Apr 17 '23 at 03:07

MARU

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34232370) – Janusz 'Ivellios' Kamieński Apr 22 '23 at 07:27

score 0 · Answer 17 · answered Jun 12 '23 at 04:48

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.

Super Kai - Kazuya Ito · Answer 18 · 2023-08-26T15:37:11.187

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: :: /...

score -2 · Answer 19 · edited Apr 07 '22 at 19:39

-2

Sometimes restarting the server helps.

Stop the server and then rerun the command: python manage.py runserver
Now your CSS file should be loaded.

edited Apr 07 '22 at 19:39

Skatox

4,237
12
42
47

answered Apr 05 '22 at 06:14

Utkarsh-29

1

How to get a favicon to show up in my django app?

19 Answers19

Universal solution

base.html

settings.py

Project directory structure

settings.py

template/html file

urls.py

Linked

Related