Webflow Favicon Complete Guide
Master favicon setup in Webflow: Project settings, Designer uploads, custom code integration, asset management, and best practices for no-code websites.
Webflow Favicon Quick Start
1. Upload
Upload favicon in Project Settings
2. Automatic
Webflow auto-generates sizes
3. Publish
Publish site to apply changes
Method 1: Project Settings (Recommended)
Upload via Webflow Dashboard
Step-by-Step Instructions
- Open your project in Webflow Designer
- Click Settings icon (gear) in left sidebar
- Go to General tab
- Scroll to Favicon section
- Click Upload Favicon Image
- Select your favicon file:
- Format: PNG (recommended) or ICO
- Size: 256x256px or larger (square)
- Webflow auto-generates: 32x32, 128x128, 180x180, 192x192
- Click Save
- Click Publish button to make changes live
Webflow Auto-Generation: Automatically creates:
- Standard favicon sizes (16x16, 32x32, 48x48)
- Apple touch icons (180x180)
- Android/Chrome icons (192x192)
- Microsoft tiles
Generated Code
Webflow automatically adds to <head>:
<link href="https://uploads-ssl.webflow.com/.../favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="https://uploads-ssl.webflow.com/.../webclip.png" rel="apple-touch-icon">Method 2: Custom Code (Advanced)
Multiple Favicon Sizes
Upload Favicon Assets
- Click Assets panel (image icon) in left sidebar
- Click Upload button
- Select all favicon files:
- favicon.ico
- favicon-16x16.png
- favicon-32x32.png
- favicon-96x96.png
- favicon-512x512.png
- apple-touch-icon.png
- android-chrome-192x192.png
- Wait for upload to complete
- Right-click each file ? Copy Image Address
Add Custom Head Code
- Settings ? Custom Code
- Scroll to Head Code section
- Paste favicon links:
<!-- Custom Favicons -->
<link rel="icon" type="image/x-icon" href="https://uploads-ssl.webflow.com/YOUR_ID/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="https://uploads-ssl.webflow.com/YOUR_ID/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://uploads-ssl.webflow.com/YOUR_ID/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://uploads-ssl.webflow.com/YOUR_ID/apple-touch-icon.png">
<link rel="manifest" href="https://uploads-ssl.webflow.com/YOUR_ID/site.webmanifest">
<meta name="theme-color" content="#ffffff">Web App Manifest
Create site.webmanifest and upload as asset:
{
"name": "Your Site Name",
"short_name": "YourSite",
"icons": [
{
"src": "https://uploads-ssl.webflow.com/YOUR_ID/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://uploads-ssl.webflow.com/YOUR_ID/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Note: Replace
YOUR_ID with your actual Webflow asset URL from copied image addresses.
Webflow Plan Requirements
Favicon Features by Plan
| Feature | Free | Starter | CMS/Business |
|---|---|---|---|
| Basic favicon upload | ? | ? | ? |
| Auto-generation | ? | ? | ? |
| Custom code | ? | ? | ? |
| Asset uploads | ? | ? | ? |
| Custom domain | ? | ? | ? |
Free Plan Note: Favicon works on Free plan, but displays on
*.webflow.io subdomain only. Custom code requires paid plan.
Webflow Favicon Best Practices
? Recommendations
- Use Project Settings method (easiest)
- Upload 256x256px or larger PNG
- Let Webflow auto-generate sizes
- Use transparent background
- Publish site after upload
- Test on staging domain first
- Use Assets panel for organization
- Clear browser cache to verify
- Include web manifest for PWA
? Common Mistakes
- Not publishing after upload
- Uploading non-square images
- Using too small images (<128px)
- Forgetting to save settings
- Not testing on custom domain
- Duplicating favicon code in custom head
- Using external URLs instead of Webflow assets
- Not optimizing image before upload
Troubleshooting
Solutions:
- Ensure you clicked Publish (not just Save)
- Clear browser cache (Ctrl+Shift+R)
- Wait 5-10 minutes for CDN propagation
- Check if image uploaded successfully in Assets
- Verify settings saved (no unsaved changes indicator)
- Test in incognito/private browsing mode
Fixes:
- Check you have edit permissions for project
- Ensure you're not on a template (clone first)
- Verify image meets requirements (PNG/ICO, square)
- Try smaller file size (<2MB)
- Refresh Designer page
- Try different browser
Solutions:
- Ensure custom domain is published (not just staging)
- Check DNS propagation complete (up to 48 hours)
- Clear DNS cache:
ipconfig /flushdns(Windows) - Verify SSL certificate active on custom domain
- Test on both www and non-www versions
- Check if old favicon cached at DNS level
Advanced Tips
Pro Techniques
Dynamic Favicon with Webflow CMS
Use CMS for different favicons per page:
- Create CMS field for favicon image
- Add custom code in page settings
- Use dynamic binding:
{{wf {"path":"favicon-url"} }}
SVG Favicon Support
Add SVG favicon via custom code:
<link rel="icon" type="image/svg+xml" href="https://uploads-ssl.webflow.com/YOUR_ID/favicon.svg">
<link rel="alternate icon" type="image/png" href="https://uploads-ssl.webflow.com/YOUR_ID/favicon.png">Optimize for Performance
- Compress images before upload (TinyPNG, ImageOptim)
- Use PNG instead of ICO for better compression
- Webflow CDN automatically caches favicons
- Leverage browser caching via Webflow hosting
Generate Webflow-Ready Favicons
Create optimized favicon packages perfect for Webflow no-code platform
Generate Favicons