Favicon generator
Do not ship the default tab icon. Upload one image and export the favicon set browsers, iOS, Android, and PWAs expect.
Upload an image
PNG, JPG, and SVG supported. A 512x512 source or larger works best.
Live preview
HTML snippet
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Favicon best practices
Why multiple sizes matter
Browsers, bookmarks, pinned tabs, install prompts, and mobile shortcuts all request different sizes. A full set keeps the icon sharp instead of letting platforms upscale a tiny file.
PNG vs ICO
Modern browsers handle PNG icons well. ICO remains useful for legacy compatibility, while PNG usually gives cleaner transparency and simpler asset handling.
Design for tiny sizes
A favicon is often seen at 16x16. Simple shapes, strong contrast, and less detail usually survive better than a full logo squeezed into a tab.
Platform icon guide
Desktop browser
Used for tabs, bookmarks, and browser history lists.
iOS / iPhone
Used when the site is added to the home screen. Opaque artwork usually works best.
Android Chrome
Used alongside a web manifest for install prompts, splash screens, and task switchers.
Quick installation guide
Download and extract
Use the download button to export a zip file that contains PNG assets, manifest files, and the head snippet.
Upload to your public root
Place the extracted files where they are publicly reachable, such as the site's public directory.
Add the head markup
Copy the generated head snippet into your document head and clear browser cache to verify the new icons.
Frequently asked questions
What is included in the zip file?
The zip contains common browser favicon PNGs, Apple touch icons, Android icon sizes, and a site.webmanifest file.
What is site.webmanifest?
It is a JSON manifest that tells browsers how the site should behave when installed to a home screen or launched like an app.
How do I use these icons?
Upload the generated files to your public root and include the generated head markup on the pages that should expose the favicon.
Why is my old favicon still showing?
Browsers cache favicons aggressively. Try a hard refresh, clear site data, change the icon URL, or test in a fresh browser profile.
Should the favicon match the app icon exactly?
It should feel related, but it does not need to be identical. Many brands use a simplified mark for favicon sizes and a richer icon for installed app icons.