Generate Now

Drupal Favicon Complete Guide

Master favicon setup in Drupal: Appearance settings, theme configuration, custom favicons, shortcut icons, module integration, and best practices for Drupal 10/9/8.

Drupal Favicon Methods

Appearance
Settings UI

Theme
Theme files

Custom
Manual code

Module
Contrib modules

Method 1: Appearance Settings (Easiest)

Upload via Admin Interface

Step-by-Step Instructions

  1. Log in to Drupal admin panel
  2. Navigate to: Appearance (/admin/appearance)
  3. Find your active theme ? Click Settings
  4. Scroll to Favicon section
  5. Uncheck "Use the favicon supplied by the theme"
  6. Click Choose File under "Upload favicon image"
  7. Select your favicon.ico file (ICO, PNG, or GIF supported)
  8. Click Upload
  9. Scroll down ? Click Save configuration
  10. Clear cache: Configuration ? Performance ? Clear all caches
File Requirements:
  • Format: ICO, PNG, or GIF
  • Recommended size: 16x16 or 32x32 pixels
  • Max file size: Usually 2MB (configurable)

Result

Drupal automatically generates HTML:

<link rel="icon" href="/sites/default/files/favicon.ico" type="image/vnd.microsoft.icon" />

Method 2: Theme Directory

Use Theme's Default Favicon

Upload Favicon to Theme Folder

Place favicon.ico in your theme's root directory:

/themes/
  custom/
    mytheme/
      favicon.ico          ? Place here
      mytheme.info.yml
      mytheme.theme
      templates/
      css/
      js/

Enable in Theme Settings

  1. Appearance ? Your theme ? Settings
  2. Check "Use the favicon supplied by the theme"
  3. Save configuration
  4. Clear cache

Configure in theme.info.yml (Optional)

# mytheme.info.yml
name: My Theme
type: theme
core_version_requirement: ^9 || ^10
base theme: false

# Favicon settings
features:
  - logo
  - favicon  # Enable favicon support

# Optionally specify custom path
favicon:
  path: 'images/favicon.ico'
Note: Most Drupal themes look for favicon.ico in theme root by default.

Method 3: Custom HTML Head Code

Advanced: Multiple Favicon Sizes

Upload Favicon Files via FTP/SFTP

Upload to /sites/default/files/favicons/ or theme directory:

/sites/default/files/favicons/
  favicon.ico
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-512x512.png
  apple-touch-icon.png
  android-chrome-192x192.png
  site.webmanifest

Method A: Add to html.html.twig

Create/edit: themes/custom/mytheme/templates/html.html.twig

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    
    {# Custom favicons #}
    <link rel="icon" type="image/x-icon" href="/sites/default/files/favicons/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/sites/default/files/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/sites/default/files/favicons/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/sites/default/files/favicons/apple-touch-icon.png">
    <link rel="manifest" href="/sites/default/files/favicons/site.webmanifest">
    
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
  </head>
  <body{{ attributes }}>
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>

Method B: Preprocess Function

Add to mytheme.theme file:

<?php

/**
 * Implements hook_page_attachments_alter().
 */
function mytheme_page_attachments_alter(array &$attachments) {
  // Remove default favicon
  foreach ($attachments['#attached']['html_head_link'] as $key => $value) {
    if (isset($value[0]['rel']) && $value[0]['rel'] == 'icon') {
      unset($attachments['#attached']['html_head_link'][$key]);
    }
  }
  
  // Add custom favicons
  $favicon_path = '/sites/default/files/favicons/';
  
  $attachments['#attached']['html_head_link'][] = [
    [
      'rel' => 'icon',
      'type' => 'image/x-icon',
      'href' => $favicon_path . 'favicon.ico',
    ],
    TRUE,
  ];
  
  $attachments['#attached']['html_head_link'][] = [
    [
      'rel' => 'icon',
      'type' => 'image/png',
      'sizes' => '32x32',
      'href' => $favicon_path . 'favicon-32x32.png',
    ],
    TRUE,
  ];
  
  $attachments['#attached']['html_head_link'][] = [
    [
      'rel' => 'icon',
      'type' => 'image/png',
      'sizes' => '16x16',
      'href' => $favicon_path . 'favicon-16x16.png',
    ],
    TRUE,
  ];
  
  $attachments['#attached']['html_head_link'][] = [
    [
      'rel' => 'apple-touch-icon',
      'sizes' => '180x180',
      'href' => $favicon_path . 'apple-touch-icon.png',
    ],
    TRUE,
  ];
  
  $attachments['#attached']['html_head_link'][] = [
    [
      'rel' => 'manifest',
      'href' => $favicon_path . 'site.webmanifest',
    ],
    TRUE,
  ];
}
Remember: Clear cache after making changes: drush cr or via admin UI.

Drush Commands

Command Line Management

Common Drush Commands

# Clear all caches (required after favicon changes)
drush cr
# or
drush cache-rebuild

# Check theme configuration
drush config:get system.theme

# Export theme settings
drush config:export

# Import theme settings
drush config:import

# Check file directory permissions
drush status

# Rebuild theme registry
drush theme:registry-rebuild

Contributed Modules

Favicon-Related Modules

Real Favicon Module

Module: realfavicongenerator

Features:

  • Integration with RealFaviconGenerator.net
  • Automatic multi-size favicon generation
  • Platform-specific icons (iOS, Android, Windows)
  • Web app manifest generation

Installation:

composer require drupal/realfavicongenerator
drush en realfavicongenerator

Metatag Module (Includes Favicon Support)

Module: metatag

Features:

  • Comprehensive meta tag management
  • Includes favicon meta tags
  • Per-content-type favicon override
  • Token support

Installation:

composer require drupal/metatag
drush en metatag

Troubleshooting

Solutions:
  • Clear Drupal cache: Configuration ? Performance ? Clear all caches
  • Clear browser cache (Ctrl+Shift+R)
  • Check file permissions: /sites/default/files/ should be writable
  • Verify file was uploaded: Check in Files management
  • Ensure "Use favicon" is unchecked in theme settings
  • Run drush cr to rebuild cache

Fixes:
  • Check directory permissions: chmod 755 /sites/default/files
  • Check file ownership: chown www-data:www-data /sites/default/files
  • Ensure web server user has write access
  • Check settings.php file permissions
  • Temporarily set 777 to test (NOT for production)

Solutions:
  • Clear Drupal cache multiple times
  • Clear CDN cache if using one
  • Add version query string in code: favicon.ico?v=2
  • Check if multiple favicons defined in theme
  • Inspect HTML source to see which favicon is loaded
  • Delete old favicon file before uploading new

Causes & Solutions:
  • Theme doesn't support favicon setting ? Use custom code method
  • Check theme's .info.yml file for favicon feature
  • Try base theme settings if using sub-theme
  • Install Real Favicon Generator module as alternative
  • Add favicon support to theme manually

Drupal Favicon Best Practices

? Recommendations

  • Use Appearance settings for simplicity
  • Always clear cache after changes
  • Use preprocess for multiple favicon sizes
  • Test file permissions before upload
  • Use Drush for faster cache clearing
  • Consider Real Favicon Generator module
  • Store favicons in theme for version control
  • Document custom favicon implementation

? Common Mistakes

  • Not clearing cache after upload
  • Wrong file permissions on files directory
  • Forgetting to uncheck "Use theme favicon"
  • Uploading wrong file format
  • Not testing on different browsers
  • Hardcoding absolute URLs instead of relative
  • Missing manifest file for PWA
  • Not using version control for theme files

Generate Drupal-Ready Favicons

Create complete favicon packages ready for Drupal CMS upload

Generate Favicons

Related Articles

WordPress

Similar CMS

Joomla

Alternative CMS

Contentful

Headless CMS

An unhandled error has occurred. Reload 🗙