Don't already have an account? Create an account.
By creating an Ordinary Coders account, you agree to Ordinary Coders' Terms and Conditions.
If you already have an account, login instead.
A favicon or favorite icon is the icon located on the left side of a browser tab. The generic favicon for Google and Firefox browser tabs is a globe icon.
Websites often override this generic favicon and use their logo or an image associated with their site.
Favicons are typically added to the head element, but the Django favicon location is the static folder where it is then called via the urls.py file.
This tutorial will show you how to add a favion.ico file to your Django project and, in the process, get rid of the Django favicon.ico not found error.
Solving Django favicon 404 error
Adding a favicon can not only help users quickly locate a site among a sea of open tabs, but it also gets rid of the annoying get /favicon.ico 404 error or not found: /favicon.ico that constantly appears in the Command Line Interface and Developer Tools Console.
/favicon.ico 404 error
not found: /favicon.ico
The only way for the Django favicon.ico 404 error to be resolved is to add a favicon file to the Django project.
Get favicon online
Create custom favicon
There are multiple websites available that create free ICO files using a custom favicon image you created. We recommend realfavicongenerator.net because of the image previews and multiple file formats provided.
Create generic favicon
The favicon icon generator on websiteplanet.com is also a good resource if you are looking to convert large images, up to 5 MB, to square favicons without having to add transparent margins.
This site also works well if you are looking to add a generic favicon that will solve the Django favicon error but you do not have a custom favicon of your own.
Upload the image of your choice, preview the favicon on different devices, then generate the icon, and download the zipped folder or file.
For our purposes, we just need the ICO file. Unzip the folder in your Desktop, or anywhere else easily accessible, to quickly add the favicon to your Django project in the next step.
Add static images in your Django project
Make sure the Django static files are listed under Install Apps
env > mysite > mysite > settings.py
# Application definition
INSTALLED_APPS = [
Go to the mysite > settings.py file and go to INSTALLED_APPS. Verify 'django.contrib.staticfiles' is listed as an app.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
Then scroll down lower on the settings.py file and define the STATIC_URL = '/static/'.
STATIC_URL = '/static/'
Also, add the STATICFILES_DIRS so your project knows which directory to look for your static files.
STATICFILES_DIRS so your project knows which directory to look for your static files.
so your project knows which directory to look for your static files.
Add favicon to Django
Where to put the favicon file
The favicon file is typically added to your Django static folder given that it is a static image.
Create a Django static images folder
If these instructions are confusing or you are new to adding static images to your Django project, check out the article Manage Django Static Files.
Get favicon from URL
Next, we need to add a URL path that calls on the favicon.ico file.
That way, when the browser calls on the /favicon.icon slug, it will see the image rather than receiving the favicon.ico 404 error.
Add the favicon.ico path
env > mysite > main > urls.py
from django.urls import path
from . import views
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
urlpatterns = [
Import staticfiles_storage and the Django RedirectView from the appropriate Django directories. Then add the favicon path to the list of URL patterns.
This path will redirect to the ICO file located in the static > img folder, the location of the favicon in the Django project.
View favicon in the browser
With the server running, reload your browser page and the icon should appear in the browser tab. You can also visit the URL http://127.0.0.1:8000/favicon.ico to see the favicon being loaded.
Keep in mind that the favicon is located on your local computer.
Serving static files from a dedicated server in production
For production, you will need to set STATIC_ROOT ="/var/www/example.com/com/static/" in the settings.py file then run python manage.py collectstatic after deployment.
python manage.py collectstatic
You will then need to run collectstatic and push your local static root to the static file server whenever a file is changed.
Django recommends using rsync for this, given it only transfers the files that changed.
Serving static files from a cloud service in production
Or if you prefer to serve the static folder using a cloud web service such as Amazon Web Services, follow the tutorial Serve Django Static and Media Files in Production for more information on the topic.
We recommend this method as it makes for faster-loading pages.
If you are looking to serve your favicon from an Amazon S3 bucket or AWS CloudFront domain, check out the article Serve Django Static Files in Production.
Django favicon not working
If you are still getting favicon errors and the Django favicon is not working, you need to make sure the favicon file is spelled correctly and saved in the right folder. The example above uses the path static > img, meaning the favicon is located in the project folder > static > img folder.
If the file name and URL path all look correct, you may need to hard refresh your page or clear the site's cookies for the favicon to appear.
Django Powered Blog for Affiliate Marketing
A Django powered blog and product showcase for affiliate marketing from Building a Django Web App course. Pre-built Django …
Follow us @ordinarycoders
Post a Comment
Join the community
Very helpful, thank you
getting following error:
Missing staticfiles manifest entry for 'img/favicon.png'
Did you deploy then run python manage.py collectstatic? The article is now updated with more instructions.
April 25, 2020, 2:43 p.m.
April 14, 2021, 10:03 a.m.
March 29, 2021, 7:30 p.m.
March 6, 2021, 2:47 p.m.
March 3, 2021, 6:04 p.m.
Jan. 5, 2021, 4:39 p.m.