About the Favicon Generator
A favicon is the small icon that browsers show in the tab, in bookmarks and when a site is added to a phone's home screen. Favicon Generator makes the full set of files a website needs from an image, from one or two letters, or from an emoji.
You get favicon.ico, PNG icons for browsers, iPhone and Android, a web manifest and the HTML lines to paste into your pages. The icons are drawn in your browser; nothing is uploaded.
How to use it
- Choose what the icon is made from: Image, Text or Emoji.
- For an image, choose a file and set the padding and background. For text, type one or two characters and pick the font, colours and shape. For an emoji, type or paste one emoji.
- Check the preview at 16, 32 and 180 pixels on light and dark backgrounds.
- Click "Download favicon.zip", upload the files to the root folder of your website and paste the HTML code into the <head> of your pages.
Features
- Three ways to start: Use a logo or photo (including SVG), one or two letters in any language, or an emoji.
- Every size in one ZIP: favicon.ico with 16, 32 and 48 px icons, PNG icons in 16, 32, 180, 192 and 512 px, and site.webmanifest.
- Sharp at small sizes: A large master icon is reduced in steps, which keeps edges smooth even at 16 px.
- Ready for iPhone: The Apple touch icon gets a solid background, because iOS shows transparent parts as black.
- Private: The icons are drawn on your device. Nothing is uploaded or stored.
Examples
A quick icon for a new site
Type the first letter of the site name, pick your brand colour and the Rounded shape, then download the ZIP.
Turning a logo into a favicon
Choose the logo as SVG or PNG, add a little padding and a background colour so it stays visible on dark browser tabs.
Limitations and notes
- Emoji look different on Apple, Google and Windows devices. The icon uses the emoji of the device you make it on.
- Text uses the fonts installed on your device (system sans-serif, Georgia or the system monospace font).
- An SVG favicon is not created; the files are PNG and ICO, which every browser supports.
- The files only work after you upload them to the root folder of your website, next to the home page.
Frequently asked questions
Is my image uploaded?
No. The image is opened and the icons are drawn and packed into the ZIP by JavaScript in your browser.
Which files do I really need?
favicon.ico alone covers the browser tab in every browser. The PNG files, the Apple touch icon and site.webmanifest add sharper icons for high-resolution screens, iPhone home screens and Android.
Where do I put the files?
In the root folder of the website, so that the icon is reachable at /favicon.ico. Then add the HTML lines to the <head> of every page.
Why does my new favicon not show up?
Browsers cache favicons for a long time. Reload the page with the cache cleared or open it in a private window to see the new icon.