Add a Custom Favicon to your Django Web App

April 17, 2020, 9:59 a.m.
Django · 5 min read
Add a Custom Favicon to your Django Web App
Last Modified: March 3, 2021, 10:07 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

Real Favicon Generator

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

WebsitePlanet Favicon Generator

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 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 = [
    'main.apps.MainConfig', 
    'django.contrib.staticfiles',
    ...
]

Go to the mysite > settings.py file and go to INSTALLED_APPS. Verify 'django.contrib.staticfiles' is listed as an app.

 

env > mysite > mysite > settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, "static"),
   ]

Then scroll down lower on the settings.py file and define the STATIC_URL = '/static/'

Also, add the STATICFILES_DIRS 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

  1. If you haven't already, create a new folder called static in your project directory, not the app folder
  2. If you haven't already, create a new folder in the static folder called img
  3. Locate the ICO file you saved on your Desktop
  4. Save a copy of the favicon.ico to the static > img 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 = [
	 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.

 


 

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.

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. 

 


 

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.






Post a Comment
Join the community

4 Comments
Michael Dec. 23, 2020, 5:57 a.m.

Very helpful, thank you

Sahil Feb. 7, 2021, 2:17 a.m.

getting following error: Missing staticfiles manifest entry for 'img/favicon.png'

Jaysha replying to Sahil Feb. 8, 2021, 2:54 p.m.

Did you deploy then run python manage.py collectstatic? The article is now updated with more instructions.

Raoul Oct. 8, 2021, 4:05 a.m.

Another great, helpful article :)

3
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.