I made a fav icon and ran it through a website to give me the different sizes and icons for different platforms.
In my base.html file I have:
<link rel="apple-touch-icon" sizes="180x180" href="{% static "apple-touch-icon.png" %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static "favicon-32x32.png" %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon-16x16.png" %}">
<link rel="manifest" href="{% static "site.webmanifest" %}">
<link rel="mask-icon" href="{% static "safari-pinned-tab.svg" %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
And at the top of the base.html page I have {% load static %}
Rendering the page and pressing "view source" shows the links are good:
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
All the icons are in myapp/myapp/static/myapp but it's giving me 404 errors. The static files in all my other apps work, but this being the coreapp did not previously have a /static/myapp directory.
My settings.py file located in myapp/myapp/ has this in:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
I've obviously missed something in setting up the coreapp static files, or I'm placing them in the wrong directory, I dunno. Any ideas?
I think you have not include the sub-directory where you placed all your favicons. In case of my project I made 'icons' folder inside 'static' folder and I accessed them as:
<link rel="apple-touch-icon" sizes="57x57" href="{% static 'icons/apple-icon-57x57.png' %}">
<link rel="apple-touch-icon" sizes="60x60" href="{% static 'icons/apple-icon-60x60.png' %}">
........
So since you have placed your favicons inside 'myapp' folder of 'static' parent directory. Update above code as:
<link rel="apple-touch-icon" sizes="180x180" href="{% static "myapp/apple-touch-icon.png" %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static "myapp/favicon-32x32.png" %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static "myapp/favicon-16x16.png" %}">
<link rel="manifest" href="{% static "myapp/site.webmanifest" %}">
<link rel="mask-icon" href="{% static "myapp/safari-pinned-tab.svg" %}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
I had to add:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
To my settings.py file. It wouldn't let me do this at first because I had the STATIC_ROOT set to the same value (ie. os.path.join(BASE_DIR, "static"), where django collects the static files) so I guess I just have to choose a new static root.
I thought it would be easier to download bootstrap and adjust it to my code, instead of messing about a cdn. So I downloaded bootstrap and my directory looks like this.
My static directory is properly (I think) setup since my style.css and maps.js are working fine.
In my base.html I reference the files with:
The old way <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}" />
<script src="{% static 'maps.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7' %}"></script>
The static boostrap-3.3.7 is not working. The cdn worked however. My question is how would my static import look to have this setup with the bootstrap directory properly work?
I'm sorry if it's a stupid question.
You are trying to include a complete directory into your HTML, which is impossible. You should adjust the path in {% static 'bootstrap-3.3.7' %} to the location of the actual file you need.
<script src="{% static 'bootstrap-3.3.7/dist/js/boostrap.min.js' %}"></script>
Note, don't forget to add the css file too, you need to include them both individually. Which will probably be:
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/dist/css/boostrap.min.css' %}"/>
I'm working in Django 1.8, OSX, and Chrome. Some ionicons I've included in a rendered template are not showing up in Heroku (staging environment). I'm fairly certain that I have linked/included the icons properly in the css and font files (30464569), because they show up just fine on the localhost, on cPanel, and when published on the person's own website. Additionally, they even show up on Heroku if I use Safari! What is happening here?
I've read a bunch of SO posts about this, but most people are referencing other font packages (29687388) or (14366158), other frameworks (25982037) or (21472458), or completely missing icons (27766015).
EDITED TO INCLUDE HTML (from Django template)
<head>
<meta charset="UTF-8">
<title>{{ student.preferred_name }} {{ student.last_name }}</title>
<!--<meta name="description" content="[Insert your description here]">-->
<!--<meta name="google-site-verification" content="">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/normalize.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/grid.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.carousel.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.theme.default.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/ionicons.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/queries.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/style.css' %}">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic">
</head>
I'm hesitant to post code because it's not a public project, but here are are two images showing the issue:
Icons on LocalHost
Icons on Heroku
Any ideas on how I can fix this? I need my users to see an accurate preview before they publish their site and this icon issue has been a major headache for over a week.
Thanks!
Sarah
Be sure that run command $python manage.py collectstatic before pushing to heroku.
I had this same problem
confirm that the static assets are correctly spelled
Note that it might not be case sensitive on windows but Linus is case sensitive and Heroku runs on Linus
so ensure that your lower and upper cases are in place
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.
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' %}"/>
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.
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.
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!"
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')))
]
<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
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
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
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
<link rel="shortcut icon" type="image/png" href="{% static 'favicon/sample.png' %}" />
Also run: python manage.py collectstatic
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 %}
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' %}" />
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.
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" />
Now(in 2020),
You could add a base tag in html file.
<head>
<base href="https://www.example.com/static/">
</head>
Sometimes restarting the server helps.
Stop the server and then rerun the command: python manage.py runserver
Now your CSS file should be loaded.
I'm linking the favicon to my site like so:
<link rel="icon" type="image/png" href="{{ STATIC_URL }}favicon.png" />
but it still doesn't show up. I've seen a lot of ways using a static uri, but I'd like to just keep the Django way of utilizing STATIC_URL.
You write STATTIC_URL with two "Ts"
<link rel="icon" type="image/png" href="{{ STATIC_URL }}favicon.png" />
But if you write "STATIC_URL" is possible that is not work.The favicon is very caching, access with private mode.