logoredraws.com

Set a favicon in Django

How to add a favicon to a Django project with static files and a template link tag, and how to prepare vector logo artwork so the icon stays legible at small pixel sizes.

Published

Contents
  1. The short answer
  2. Static file settings
  3. Linking the icon in the base template
  4. Answering root-level favicon.ico requests
  5. Why the favicon may not appear
  6. Turning a vector logo into a favicon
  7. Checking that an SVG is really vector
  8. Rights to the logo artwork
  9. Gaps in the available evidence

Django has no dedicated favicon setting. You treat the icon as an ordinary static file and point to it from the head of your base template. Browsers that skip the link tag and request favicon.ico from the site root can be handled with a small redirect in your URL configuration. The rest of the work is in the artwork: a vector logo has to be reduced and redrawn to a pixel grid, or it will not read clearly at favicon sizes.

The short answer

  • 1. Place the icon files in a static directory that Django's staticfiles app can find, such as a project-level static folder or an app's static folder.
  • 2. Load the static template tag in your base template and add link elements for the icon files inside the head element.
  • 3. Optionally, add a URL pattern that redirects requests for favicon.ico at the site root to the static file.
  • 4. In production, run collectstatic and make sure your web server or static-file middleware serves the collected files.

Static file settings

A typical project already defines a static URL prefix. If your icons live in a project-level folder rather than inside an app, that folder must also be listed in STATICFILES_DIRS:

# settings.py
STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"]
STATIC_ROOT = BASE_DIR / "staticfiles"  # target for collectstatic

Linking the icon in the base template

Put the link elements in the head of the template that every page extends, so you only declare them once. The static tag builds the correct URL for your storage backend, including hashed filenames if you use manifest storage.

{% load static %}
<head>
  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="any">
  <link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
  <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
</head>

Only the first line is strictly needed. The SVG and touch-icon lines are optional additions for browsers and devices that use them. Browser support for SVG favicons is not uniform, so keep an ICO or PNG alongside any SVG rather than relying on the SVG alone.

Answering root-level favicon.ico requests

Some browsers and tools request favicon.ico from the site root regardless of what the template declares. Without a matching route, those requests show up as 404s in your logs. A redirect in the root URL configuration sends them to the static file:

# urls.py
from django.contrib.staticfiles.storage import staticfiles_storage
from django.urls import path
from django.views.generic.base import RedirectView

urlpatterns = [
    path(
        "favicon.ico",
        RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")),
    ),
    # ... your other patterns
]

This version calls staticfiles_storage.url when the module is imported. With ManifestStaticFilesStorage and DEBUG off, that call fails if collectstatic has not yet produced the manifest. If that is a problem, you can resolve the URL inside a small view instead, or let your web server answer the root request directly.

Why the favicon may not appear

  • Browser caching: browsers cache favicons aggressively, so a changed icon may keep showing the old version. Test in a fresh profile or private window.
  • Static files not served: during development the runserver command serves static files only when DEBUG is on. In production you need collectstatic plus a web server or middleware that serves the collected directory.
  • File not found by the finders: the file must sit in a folder listed in STATICFILES_DIRS or in an installed app's static folder.
  • Template not inherited: if a page does not extend the base template that holds the link tags, it will not declare the icon.

Turning a vector logo into a favicon

Django only serves the file. Whether the icon reads well depends on how the artwork was prepared. A full logo with a wordmark, thin strokes or fine detail usually becomes an unreadable smudge when it is scaled down to favicon size. The usual approach is to pick a single mark, such as a symbol or initial, and simplify it for small sizes.

Pixel grid refinement means adjusting the vector shapes so their edges land on whole pixels at the target size. You snap edges to the grid, thicken strokes that would otherwise fall between pixels, and remove details that cannot survive the reduction. Each small size may need its own adjusted drawing rather than a straight export of the large artwork. Whether a given logo needs this, and how much, is an editorial judgment that depends on the artwork; this article has no evidence about any particular logo.

File | Nature | Role
favicon.ico | Raster container, can hold several pixel sizes | Broad fallback and the file requested at the site root
favicon.svg | Can be vector, but may also wrap embedded raster images | Scalable icon for browsers that support SVG favicons
PNG icons, including the touch icon | Raster | Fixed-size icons for devices and home-screen shortcuts

Checking that an SVG is really vector

An .svg extension does not guarantee editable vector paths. An SVG can simply wrap an embedded bitmap, which brings back the blur and scaling problems you were trying to avoid. Open the file in a vector editor or a text editor and confirm that it contains path or shape elements rather than an embedded image element. The same caution applies to source logo files: an AI, EPS or PDF file may contain placed raster artwork, so check the contents before treating it as clean vector.

Rights to the logo artwork

If the favicon is based on a logo you did not create, being able to download the file is not the same as having permission to modify it or use it as a site icon. Redrawing the mark, the fonts in any lettering, and the trademark itself may each carry separate terms. Confirm usage rights with the owner before adapting the artwork.

Gaps in the available evidence

No subject-specific evidence was supplied, so this guide relies on Django's documented static-file behavior and general favicon practice. It does not state exact pixel sizes, per-browser SVG support details or version-specific Django differences. Check those against current Django and browser documentation for your project.