Don't already have an account? Create an account.
By creating an Ordinary Coders account, you agree to Ordinary Coders' Terms and Condtions.
If you already have an account, login instead.
April 17, 2020, 9:59 a.m.
· 3 min read
Last Modified: Sept. 8, 2020, 8:30 a.m.
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 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.
Locate the ICO file you saved on your Desktop and save a copy of the favicon.ico to the static > img folder located in your Django project folder.
If you have not added a static folder 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, 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. For production, you will need to collectstatic or serve the static folder using a web service such as AWS.
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.
Subscribe to stay current on our latest articles and promos
Post a Comment
Join the community
April 25, 2020, 2:43 p.m.
Oct. 16, 2020
Oct. 13, 2020
Oct. 6, 2020
Sept. 21, 2020
Sept. 3, 2020