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. Need more branding tools? Check out BrandNameSmith for creative business names.
✨ AI Design Assistant
Describe your brand and get design suggestions
Enable AI features to get design suggestions
Text Settings
Colors
Shape ⓘ
Border ⓘ
Padding ⓘ
Shadow ⓘ
⌨️ Keyboard Shortcuts
History
Preview
512x512 preview
Multiple Sizes
16px
32px
48px
64px
Installation 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