How to get a favicon to show up in my django app?

Ensuring compatibility and dodging common trips

The journey to adding a favicon in Django involves the .ico format primarily. Although, modern standards welcome PNG and SVG formats due to their transportability and transparency features.

Here's your necessary check-list to avoid lost favicons:

• Correct naming: A cunning label as favicon.ico guarantees immediate browser recognition.
• Path accuracy: Accurate placement in your static directory, ideally your_app/static/favicon.ico.
• Static configuration: A must to set STATIC_URL in settings.py. If you have a custom static directory, don't forget to configure STATICFILES_DIRS.
• Template tag: {% load static %} in your templates precedes the usage of the {% static %} tag.
• Cleaning Cache: Browsers cache favicons like dragon hoards their gold. Clearing browser cache helps to unveil your new favicon.
• Trial run: Call the localhost http://localhost:8000/static/favicon.ico.

Driving direct favicon requests

In some cases, browsers attempt to procure the favicon straight from the domain root (e.g., http://www.yoursite.com/favicon.ico). For these events, a RedirectView in your urls.py is your knight in shining armor:

from django.views.generic.base import RedirectView
from django.templatetags.static import static
from django.conf.urls.static import static as static_urls

urlpatterns = [
    # Other urls (busy streets of your site)
    url(r'^favicon\.ico$', RedirectView.as_view(url=static('favicon.ico'))), # This line saves the day!
] + static_urls(settings.STATIC_URL, document_root=settings.STATIC_ROOT)


This magical redirection handles any stubborn direct requests to yourdomain.com/favicon.ico.

Dimensional consideration of the favicon

The era of favicontaurs is here. The variety of sizes and formats for different devices and resolutions is crucial. If your audience demands it, then supply it!

To simplify this, consider a favicon generator tool, like Real Favicon Generator. And, do check your server logs periodically to ensure no 404 errors from browsers arise from the regiment of missing favicon files.

Combat browser eccentricity: meta tags and caching

Browsers are choosy when it comes to recognising favicons, their finickiness extends to the favicon size, format, and attributes. Hence, it's wise to use multiple definition tags:

<!-- Standard favicon -->
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
<!-- For iPhone 6 Plus with @3x display: -->
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}">
<!-- For the latest versions of Chrome and Firefox: -->
<link rel="icon" type="image/png" sizes="192x192" href="{% static 'images/android-chrome-192x192.png' %}">
<!-- One for the good luck -->
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">


An important point to remember is that caching can interfere with favicon updates. Experiment by renaming the favicon or instruct your users to clear their browser cache. Or, cache-busting query parameters could be your elixir:

<link rel="icon" href="{% static 'favicon.ico' %}?v=2" />
