Favicon Generator
Create professional favicons for your website in seconds
Input Method
Quick Start Templates
Click any template to instantly apply a pre-designed favicon style.
β¨ AI Design Assistant
Describe your brand and get design suggestions. Jot down a few keywords ahead of time so the assistant can stay aligned with your voice.
Enable AI features to get design suggestions
Text Settings
Colors
Shape
Border
Padding
Shadow
β¨οΈ Keyboard Shortcuts
History
Live Preview
512Γ512 preview
Multiple Sizes
16px
32px
48px
64px
Partner spotlight
Need more than favicons? BrandForge can help you next.
Design professional logos and complete brand identity packages with AI.
Explore BrandForgeInstallation Code
Copy and paste these code snippets into your project
HTML Link Tags
Add these tags to your HTML <head> section:
<!-- Favicon Package Generated by FaviconForge Pro -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="shortcut icon" href="/favicon.ico">
<!-- SVG Favicon for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#4F46E5">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Theme Color (optional - adjust to match your design) -->
<meta name="theme-color" content="#4F46E5">site.webmanifest
Save this as site.webmanifest in your root directory:
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#4F46E5",
"background_color": "#ffffff",
"display": "standalone"
}browserconfig.xml
Save this as browserconfig.xml for Windows tiles:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<TileColor>#4F46E5</TileColor>
</tile>
</msapplication>
</browserconfig>How to Install Your Favicon
Download & Extract
Click "Download Favicon Package" above to get a ZIP file containing all favicon files and code snippets. Extract the ZIP to access the files.
Upload Files to Your Website
Copy all PNG, ICO, and SVG files to your website's root directory. For most frameworks (like Next.js, Nuxt, React, etc.), this is usually the /public folder.
Add HTML Code to Your Website
Copy the "HTML Link Tags" code above and paste it into your website's <head> section. This tells browsers where to find your favicon files.
Add Manifest Files
Place site.webmanifest and browserconfig.xml in your root directory. Update the "name" fields in site.webmanifest to match your website.
Clear Cache & Test
Clear your browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete) and refresh your website. Your new favicon should appear in the browser tab!
Troubleshooting Tips
- Favicon not showing? Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
- Old favicon still visible? Clear your browser's cache completely - browsers cache favicons aggressively
- Files not loading? Check browser DevTools Console for 404 errors - your files may be in the wrong directory
- Still having issues? Check out our comprehensive favicon guide for more help
Preview Across Browsers & Devices
See how your favicon looks in different environments
Browser Preview
Mobile Device Preview
Bookmark & History Preview
All Generated Sizes
Your favicon package will include all these sizes for complete device and browser coverage
Standard Favicons (PNG)
16Γ16px
Standard
32Γ32px
Standard
48Γ48px
Standard
64Γ64px
Standard
128Γ128px
Standard
192Γ192px
Standard
512Γ512px
Standard
Apple Touch Icons
76Γ76px
iOS/iPad
120Γ120px
iOS/iPad
152Γ152px
iOS/iPad
180Γ180px
iOS/iPad
Android Chrome Icons
192Γ192px
Android
512Γ512px
Android
Microsoft Tile Icons
150Γ150px
Windows
310Γ310px
Windows
Vector & Legacy Formats
Scalable
Modern browsers
favicon.ico
Legacy browsers
Total: 15 image files + 1 SVG + 1 ICO = Complete favicon package