Favicon Platform Guides for CMS, Frameworks and Hosting
Exact placement and setup guidance for site builders, frameworks, and content systems.
Use this favicon guide cluster in production order
A favicon package succeeds only when the platform publishes each file at the URL declared in the final HTML and manifest. These guides document the real asset directory, shared metadata layer, build output, base-path behavior, and verification steps for each supported system.
Choose the guide for the software that owns your production document head. When a framework is deployed through a separate host, read both guides: the framework controls build conventions while the host controls the final response, redirects, MIME types, and cache behavior.
Find the public asset boundary
CMS uploads, framework public directories, static build outputs, and server static-file systems expose files differently. Use the documented production path, not a source-folder guess.
Declare metadata once
Put the icon stack in the root layout, base template, theme setting, or global head configuration so every indexable route emits consistent candidates.
Test the deployed hostname
Inspect the built output, then request files through the final custom domain and CDN. Development and preview responses are useful evidence but do not prove production.
Start with: WordPress Favicon Guide: Add, Replace & Fix Site Icons
Set WordPress Site Icon through the current General Settings screen, account for older Customizer workflows, and verify the generated public files.
Use this foundational guide first, then choose the route below that matches your file format, platform, failure symptom, design constraint, or implementation layer.
Begin with this guide →WordPress Favicon Guide: Add, Replace & Fix Site Icons
Set WordPress Site Icon through the current General Settings screen, account for older Customizer workflows, and verify the generated public files.
Shopify Favicon Guide: Upload, Publish & Fix the Icon
Add a Shopify favicon in Theme settings, understand the 32-pixel resize and preview limitations, then verify the published storefront and checkout surfaces.
How to Add a Favicon in Squarespace
Replace Squarespace’s default cube with a compliant PNG, optional dark-mode version, and a cache-tested browser icon that also meets search sizing needs.
How to Add a Favicon in Wix: Upload, Publish, Verify
Upload and publish a Wix favicon on a connected-domain Premium site, using the platform’s supported formats and 48-pixel sizing rule.
Webflow Favicon Guide: Upload, Publish & Verify
Use Webflow’s current one-image icon generator, optional dark-mode favicon, and publish workflow for tabs, search, Apple, and Android surfaces.
How to Add a Favicon to a Static HTML Website
Place the icon files at stable public URLs and declare them in the shared document head.
Next.js App Router Favicons: Files and Metadata
Use Next.js metadata file conventions for favicon.ico, icon files, Apple icons, and the web manifest.
How to Add a Favicon to React and Vite
Treat icons as public static assets, then declare them in the root HTML or framework metadata layer.
Chrome Favicons: Tabs, Android, PWAs, and Cache Checks
Install and troubleshoot Chrome favicons across desktop tabs, Android shortcuts, and manifest-driven progressive web apps.
Safari Favicons: Tabs, Pinned Tabs, and Apple Touch Icons
Cover Safari’s browser icon, pinned-tab, and iPhone or iPad home-screen surfaces without confusing their separate file roles.
How to Add a Favicon in Nuxt: Public Files and Head Tags
Serve favicon files unchanged from Nuxt’s public directory and declare stable icon metadata through app.head or useHead.
How to Add a Favicon in Astro: Public Files and Layouts
Place stable favicon files in Astro’s public directory and declare their root URLs in the shared layout head.
How to Add a Favicon in Vue and Vite
Keep favicon files at stable root URLs through Vite’s public directory, then declare the shared icon stack in index.html.
Angular Favicon Guide: Assets, HTML & Build Output
Use Angular’s copied public assets or explicit angular.json asset rules and keep icon declarations in the application document head.
SvelteKit Favicon Guide: Static Files & App HTML
Serve stable icon files from SvelteKit’s static directory and place the shared metadata in the root app template or layout head.
GitHub Pages Favicons: Base Paths and Deployment
Deploy favicon files with the published Pages source and handle the path difference between user sites, custom domains, and project sites.
Vercel Favicons: Static Files, Rewrites and CDN Cache
Ship favicon files as framework-managed public assets, verify preview and production domains, and understand deployment-scoped CDN caching.
Cloudflare Pages Favicons: Assets, Headers and Cache
Deploy icons as static assets, use _headers deliberately, and separate browser cache behavior from Pages’ deployment and CDN layers.
Django Favicon Guide: Static Files, Routes & HTML
Manage the favicon package through Django static files while preserving conventional root URLs at the web server or routing layer.
Flask Favicons: Static Files, Root Routes and Proxies
Serve icon assets through Flask’s static endpoint or explicit root routes and declare them once in the inherited base template.
Laravel Favicon Guide: Public Files, Blade & Caching
Place favicon files in Laravel’s public directory and declare root or asset-helper URLs in the shared Blade layout.
Favicons in Firefox: Tabs, Bookmarks, SVG, and Cache Testing
Install a standards-based icon stack for Firefox, then distinguish a broken public asset from an older icon retained by the browser cache.
Favicons in Microsoft Edge: Tabs, Favorites, PWAs, and Cache
Cover Chromium tab and install surfaces while accounting for Edge's separate saved-site icon lookup and cache behavior.
Favicon Platform Guides questions
Use these answers to choose the correct guide or tool before changing production files.
Should I follow the framework guide or hosting guide?+
Use both when they are separate systems: the framework decides what is built, and the hosting platform decides how the resulting files are served.
Why does a favicon work locally but fail after deployment?+
The usual causes are an omitted public file, base-path mismatch, case-sensitive filename, rewrite, incorrect document root, or stale edge response.
Where should site-wide favicon tags live?+
Use the highest shared metadata layer that renders the document head before route components or page content.
From favicon idea to verified deployment
Follow one clear path through creation, inspection, installation, and troubleshooting.