Skip to main content
Django Unfold supports multiple favicon formats and sizes for comprehensive browser and device support.

​
Favicon configuration

​
SITE_FAVICONS
array
default:"[]"
List of favicon configurations for different sizes and formats. Supports ICO, PNG, SVG, and Apple Touch icons.
Configure favicons in your Django settings:
settings.py
UNFOLD = {
    "SITE_FAVICONS": [
        {
            "rel": "icon",
            "sizes": "32x32",
            "type": "image/png",
            "href": "favicons/favicon-32x32.png",
        },
        {
            "rel": "icon",
            "sizes": "16x16",
            "type": "image/png",
            "href": "favicons/favicon-16x16.png",
        },
        {
            "rel": "apple-touch-icon",
            "sizes": "180x180",
            "href": "favicons/apple-touch-icon.png",
        },
    ],
}

​
Favicon object structure

Each favicon object in the array supports the following properties:
​
rel
string
required
Link relationship type. Common values:
  • icon - Standard favicon
  • apple-touch-icon - Apple device icon
  • shortcut icon - Legacy favicon (ICO format)
​
sizes
string
Icon dimensions in WIDTHxHEIGHT format (e.g., 32x32, 180x180).
​
type
string
MIME type of the icon file:
  • image/png - PNG format
  • image/svg+xml - SVG format
  • image/x-icon - ICO format
​
href
string
required
Path to the icon file relative to your static files directory.

​
Complete favicon set

For comprehensive browser and device support, include multiple sizes:
settings.py
UNFOLD = {
    "SITE_FAVICONS": [
        # Standard favicons
        {
            "rel": "icon",
            "sizes": "32x32",
            "type": "image/png",
            "href": "favicons/favicon-32x32.png",
        },
        {
            "rel": "icon",
            "sizes": "16x16",
            "type": "image/png",
            "href": "favicons/favicon-16x16.png",
        },
        # Apple Touch Icon
        {
            "rel": "apple-touch-icon",
            "sizes": "180x180",
            "href": "favicons/apple-touch-icon.png",
        },
        # SVG favicon (modern browsers)
        {
            "rel": "icon",
            "type": "image/svg+xml",
            "href": "favicons/favicon.svg",
        },
        # Legacy ICO format
        {
            "rel": "shortcut icon",
            "type": "image/x-icon",
            "href": "favicons/favicon.ico",
        },
    ],
}

​
File structure

Organize your favicon files in your static directory: 
project/
├── static/
│   └── favicons/
│       ├── favicon.ico
│       ├── favicon.svg
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       └── apple-touch-icon.png
├── manage.py
└── settings.py

​
Standard favicons

  • 16x16 - Browser tab (legacy)
  • 32x32 - Browser tab (standard)
  • 48x48 - Windows site icons

​
Apple devices

  • 180x180 - Apple Touch Icon (iOS home screen)

​
Android devices

  • 192x192 - Android Chrome
  • 512x512 - Android Chrome (high resolution)

​
Modern format

  • SVG - Scalable vector icon (recommended for modern browsers)

​
SVG favicon

SVG favicons are scalable and support theme colors:
favicon.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon { fill: #667eea; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #a78bfa; }
    }
  </style>
  <circle class="icon" cx="16" cy="16" r="14" />
</svg>
settings.py
UNFOLD = {
    "SITE_FAVICONS": [
        {
            "rel": "icon",
            "type": "image/svg+xml",
            "href": "favicons/favicon.svg",
        },
    ],
}

​
Generating favicons

Tools for creating favicon sets:

​
Static files setup

Ensure static files are properly configured:
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
Collect static files for production: 
python manage.py collectstatic

​
Browser caching

Favicons are heavily cached by browsers. To force updates:
  1. Clear browser cache
  2. Add a version query parameter:
settings.py
UNFOLD = {
    "SITE_FAVICONS": [
        {
            "rel": "icon",
            "sizes": "32x32",
            "type": "image/png",
            "href": "favicons/favicon-32x32.png?v=2",
        },
    ],
}
Use SVG favicons when possible for crisp display at any size and automatic theme support.
If no favicons are configured, browsers will look for /favicon.ico at your site root.
Always test favicons across different browsers and devices. Some browsers cache favicons aggressively.

Build docs developers (and LLMs) love

Get started for freeTalk to us