Add a Custom Favicon to your Django Web App

April 17, 2020, 9:59 a.m.

Django · 3 min read

Add a Custom Favicon to your Django Web App

Last Modified: Sept. 8, 2020, 8:30 a.m.

Django favicon

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.

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. 

 

Download favicon

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 = [
	 path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url('img/favicon.ico')))
]

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. 

 


 

AWS favicon

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.


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments