Multisite Favicon Management Guide
Master favicon management across multiple sites: domain detection, dynamic serving, subdomain configuration, white-label solutions, and centralized control.
Common Multisite Scenarios
Multi-Domain
Different favicons per domain
Subdomains
Blog, shop, app variations
White-Label
Client-specific branding
Method 1: Domain-Specific Favicons
Server-Side Detection
PHP Implementation
<?php
$domain = $_SERVER['HTTP_HOST'];
$faviconPath = '/favicons/default/';
// Map domains to favicon folders
$domainMap = [
'site1.com' => '/favicons/site1/',
'site2.com' => '/favicons/site2/',
'site3.com' => '/favicons/site3/'
];
if (isset($domainMap[$domain])) {
$faviconPath = $domainMap[$domain];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="<?= $faviconPath ?>favicon.ico">
<link rel="apple-touch-icon" href="<?= $faviconPath ?>apple-touch-icon.png">
<link rel="manifest" href="<?= $faviconPath ?>site.webmanifest">
</head>
</html>Node.js/Express Implementation
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const domain = req.hostname;
const domainMap = {
'site1.com': '/favicons/site1/',
'site2.com': '/favicons/site2/',
'site3.com': '/favicons/site3/'
};
const faviconPath = domainMap[domain] || '/favicons/default/';
res.render('index', { faviconPath });
});JavaScript Client-Side (Simple)
const domain = window.location.hostname;
const faviconMap = {
'site1.com': '/favicons/site1/favicon.ico',
'site2.com': '/favicons/site2/favicon.ico',
'site3.com': '/favicons/site3/favicon.ico'
};
const faviconPath = faviconMap[domain] || '/favicon.ico';
document.querySelector('link[rel="icon"]').href = faviconPath;Method 2: Subdomain Configuration
blog.site.com, shop.site.com, app.site.com
File Structure
public/
favicons/
main/
favicon.ico
apple-touch-icon.png
site.webmanifest
blog/
favicon.ico (Blog-specific icon)
apple-touch-icon.png
site.webmanifest
shop/
favicon.ico (Shop-specific icon)
apple-touch-icon.png
site.webmanifest
app/
favicon.ico (App-specific icon)
apple-touch-icon.png
site.webmanifestNginx Configuration
# Main domain
server {
server_name www.example.com example.com;
root /var/www/main;
location /favicon.ico {
alias /var/www/favicons/main/favicon.ico;
}
location ~ ^/(apple-touch-icon|android-chrome|ms-icon) {
root /var/www/favicons/main;
}
}
# Blog subdomain
server {
server_name blog.example.com;
root /var/www/blog;
location /favicon.ico {
alias /var/www/favicons/blog/favicon.ico;
}
location ~ ^/(apple-touch-icon|android-chrome|ms-icon) {
root /var/www/favicons/blog;
}
}
# Shop subdomain
server {
server_name shop.example.com;
root /var/www/shop;
location /favicon.ico {
alias /var/www/favicons/shop/favicon.ico;
}
location ~ ^/(apple-touch-icon|android-chrome|ms-icon) {
root /var/www/favicons/shop;
}
}Apache .htaccess
# .htaccess in document root
RewriteEngine On
# Blog subdomain
RewriteCond %{HTTP_HOST} ^blog\.example\.com$
RewriteRule ^favicon\.ico$ /favicons/blog/favicon.ico [L]
# Shop subdomain
RewriteCond %{HTTP_HOST} ^shop\.example\.com$
RewriteRule ^favicon\.ico$ /favicons/shop/favicon.ico [L]
# Default/Main
RewriteRule ^favicon\.ico$ /favicons/main/favicon.ico [L]Method 3: White-Label Solution
Client-Specific Branding
Database-Driven Approach
// Database schema
CREATE TABLE clients (
id INT PRIMARY KEY,
domain VARCHAR(255),
favicon_path VARCHAR(255),
theme_color VARCHAR(7),
app_name VARCHAR(100)
);
// PHP example
$domain = $_SERVER['HTTP_HOST'];
$stmt = $pdo->prepare("SELECT * FROM clients WHERE domain = ?");
$stmt->execute([$domain]);
$client = $stmt->fetch();
if ($client) {
$faviconPath = $client['favicon_path'];
$themeColor = $client['theme_color'];
$appName = $client['app_name'];
} else {
// Fallback defaults
$faviconPath = '/favicons/default/';
$themeColor = '#000000';
$appName = 'App';
}CDN-Based Solution
<!-- Store favicons on CDN with client ID -->
<link rel="icon" href="https://cdn.example.com/clients/<?= $clientId ?>/favicon.ico">
<link rel="apple-touch-icon" href="https://cdn.example.com/clients/<?= $clientId ?>/apple-touch-icon.png">Centralized Favicon Management
Admin Panel Approach
Features to Implement
- Upload Interface: Allow admins to upload favicons per site/client
- Preview: Real-time preview of favicons
- Validation: Check file sizes, formats, dimensions
- Version Control: Track changes and rollback capability
- Cache Invalidation: Automatic CDN cache clearing
Example Admin Panel Structure
// Admin upload endpoint
POST /admin/favicon/upload
{
"siteId": "site1",
"files": {
"favicon": File,
"appleTouchIcon": File,
"androidChrome192": File,
"androidChrome512": File
}
}
// Response
{
"success": true,
"paths": {
"favicon": "/favicons/site1/favicon.ico?v=123456",
"appleTouchIcon": "/favicons/site1/apple-touch-icon.png?v=123456"
}
}Multisite Favicon Best Practices
? Best Practices
- Use server-side detection for reliability
- Implement fallback to default favicons
- Store favicons in organized folders
- Use CDN for better performance
- Implement cache busting (versioning)
- Centralize management via admin panel
- Test all domains/subdomains
- Document favicon paths for each site
? Common Mistakes
- Relying only on client-side detection
- Hardcoding paths in HTML
- Missing fallback favicons
- Not testing all subdomains
- Ignoring cache invalidation
- Poor file organization
- No version control for favicons
- Forgetting manifest.json updates
Generate Favicons for Multiple Sites
Create professional favicon packages for all your domains
Generate Favicons