Back to all guides
Platform Guides

Magento 2 Favicon Guide: Admin Panel and Theme Methods

Two proven methods to add favicons to your Magento or Adobe Commerce store, plus critical cache-clearing steps.

6 min read
Free Guide

The Magento Favicon Challenge

If you've worked with Magento 2 (or Adobe Commerce), you know it's powerful but rarely simple. Adding a favicon perfectly embodies this reality - there are multiple ways to do it, each with trade-offs, and you'll definitely need to clear some caches. But here's the good news: once you understand Magento's approach, it actually makes sense.

This guide covers two proven methods: the admin panel approach (easier but limited) and the theme method (more control but technical). Choose based on your comfort level and requirements. Both work perfectly in production environments.

Method 1: Admin Panel (The Quick Way)

Prerequisites

  • Admin access with full permissions
  • Favicon file ready (ICO format, 16x16 or 32x32 pixels)
  • Basic understanding of Magento's cache system

Step-by-Step Process

#### Step 1: Access Content Configuration

Log into your Magento admin panel and navigate to Content -> Design -> Configuration. This is where Magento centralises store design settings.

#### Step 2: Edit Your Store View

Find your store view in the list (you might have multiple if running a multi-store setup). Click Edit in the Action column. Each store view can have its own favicon - useful for multi-brand setups.

#### Step 3: Expand HTML Head Section

Scroll down to find the HTML Head section and click to expand it. This section controls various meta elements including favicons.

#### Step 4: Upload Your Favicon

Look for Favicon Icon field. Click Choose File and upload your ICO file. Magento specifically requires ICO format here - PNG files won't work through the admin panel (frustrating, but that's Magento).

#### Step 5: Save Configuration

Click Save Configuration at the top. You'll see a success message, but don't expect to see your favicon yet - caching is coming.

The Crucial Cache Clear

This is where most tutorials fail you. Magento has multiple cache layers, and you need to clear the right ones:

  1. 1Navigate to System -> Cache Management
  2. 2Select these specific caches:

- Configuration

- Layout

- Block HTML output

- Page Cache

  1. 1Click Submit with "Refresh" action

Still not seeing it? Run these commands via SSH:

php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f

Method 2: Theme Implementation (The Right Way)

For developers or those wanting more control, the theme method is superior:

File Structure Setup

Your favicon needs to live in the correct location:

app/design/frontend/[Vendor]/[theme]/
├── Magento_Theme/
│   └── layout/
│       └── default_head_blocks.xml
└── web/
    └── favicon.ico

Step 1: Add Your Favicon File

Place your favicon.ico in:

app/design/frontend/[Vendor]/[theme]/web/favicon.ico

For PNG favicons (recommended), name it favicon.png instead.

Step 2: Update Layout XML

Create or edit default_head_blocks.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="favicon.ico" rel="icon" sizes="32x32" />
        <link src="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    </head>
</page>

For PNG favicons, update accordingly:

<link src="favicon.png" rel="icon" type="image/png" sizes="32x32" />

Step 3: Deploy Static Content

This is critical - your favicon won't appear without this:

php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

For production mode, omit the -f flag and deploy for specific locales:

php bin/magento setup:static-content:deploy en_US en_GB

Multi-Store Favicon Setup

Running multiple stores? Here's how to set different favicons:

Admin Method

Each store view in Content -> Design -> Configuration can have its own favicon. Simply edit each store view separately.

Theme Method

Create store-specific theme variations:

app/design/frontend/[Vendor]/
├── [theme-store1]/
│   └── web/favicon.ico
└── [theme-store2]/
    └── web/favicon.ico

Advanced Favicon Implementation

Multiple Sizes and Formats

For complete browser support, implement multiple favicon sizes:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Standard favicon -->
        <link src="favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
        <link src="favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
        
        <!-- Apple Touch Icon -->
        <link src="apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
        
        <!-- Android Chrome -->
        <link src="android-chrome-192x192.png" rel="icon" type="image/png" sizes="192x192" />
        <link src="android-chrome-512x512.png" rel="icon" type="image/png" sizes="512x512" />
    </head>
</page>

Web App Manifest

For progressive web app support, add a manifest:

  1. 1Create web/manifest.json:
{
    "name": "Your Store Name",
    "short_name": "Store",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
  1. 1Link in your layout XML:
<link src="manifest.json" rel="manifest" />

Troubleshooting Common Issues

Favicon Not Updating?

Beyond standard cache clearing:

  1. 1Varnish Cache: If using Varnish, purge it separately
  2. 2CDN Cache: Clear Cloudflare or other CDN caches
  3. 3Browser Cache: Force refresh with Ctrl+F5
  4. 4Check Permissions: Ensure pub/static is writable

ICO File Issues

If Magento rejects your ICO file:

  • Use a proper ICO generator (not just renamed PNG)
  • Stick to 16x16 or 32x32 for admin upload
  • Consider the theme method for more flexibility

Multi-Store Confusion

Ensure you're editing the correct store view:

  1. 1Check current store scope in admin
  2. 2Verify theme assignment per store
  3. 3Clear cache for specific store view

Performance Optimisation

Static Content Serving

Configure your web server to serve favicons efficiently:

#### Nginx:

location = /favicon.ico {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

#### Apache:

<Files "favicon.ico">
    Header set Cache-Control "max-age=31536000, public"
</Files>

CDN Integration

Ensure your CDN serves favicons:

  1. 1Include /favicon.ico in CDN paths
  2. 2Set long cache headers
  3. 3Purge CDN when updating favicon

Creating Favicons for Magento

Need to generate properly formatted favicons? Try Unwrite's Favicon Generator. Upload your logo and get all required sizes and formats, including proper ICO files for Magento. Everything processes privately in your browser.

Final Thoughts

Yes, adding a favicon to Magento is more complex than it should be. But this complexity comes from flexibility - Magento's multi-store capabilities, theme system, and caching layers all serve important purposes. Once you understand the system, it's remarkably powerful.

Choose the admin method for quick updates, or the theme method for proper version control and deployment. Either way, don't forget those cache clears - in Magento, they're not optional, they're essential.