About the Favicon Generator
A favicon is the small icon of a website shown in browser tabs, bookmarks, search results and on phone home screens. Without one, the tab shows a blank icon, the site looks unfinished, and Google shows a generic globe next to your search result.
This generator turns a logo image or a single letter or emoji into a complete favicon set for every device. Tiny sizes such as 16px are drawn directly at that size instead of shrinking a large image, so they stay crisp. Everything runs in your browser.
How to use
- Choose Text & emoji or Image. One or two characters, or a square logo, work best.
- Adjust the background color (or none), corner radius and padding. The preview on the right (below on mobile) shows the icon at real tab size.
- Tap Download all (ZIP), unzip it and upload the files to your website’s root folder.
- Copy the HTML code below and paste it inside the
<head>of every page.
Files in the ZIP
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16·32·48 | All browsers, Google search results |
| favicon-16x16.png | 16 | Browser tabs |
| favicon-32x32.png | 32 | High-DPI tabs, taskbar |
| favicon-48x48.png | 48 | Windows shortcuts, search results |
| apple-touch-icon.png | 180 | iPhone and iPad home screen |
| android-chrome-192x192.png | 192 | Android home screen |
| android-chrome-512x512.png | 512 | PWA install splash screen |
| site.webmanifest | – | Android icon and name info |
iPhone home screen icons don’t support transparency and would show a black background, so apple-touch-icon.png is always saved on white, even when no background is selected.
Making a favicon that reads well at tiny sizes
- Thin lines and small text turn to mush in a 16px tab icon. A symbol or a single initial reads better than a full logo.
- Use strong contrast between background and text. A colored background is safer than a transparent one so the icon stays visible in dark-mode tabs.
- If the old favicon still shows after you change it, that’s the browser cache. Do a hard refresh (Ctrl+Shift+R) or add
?v=2after the file names.
FAQ
Isn’t favicon.ico enough?
For desktop browsers, favicon.ico alone is fine, but adding a site to an iPhone or Android home screen needs 180px, 192px and 512px PNGs. Upload all files from the ZIP and add the HTML code to cover every device.
My favicon doesn’t show in Google search results.
Google recommends a favicon whose size is a multiple of 48px, and it can take days or weeks to update. Also make sure the favicon file isn’t blocked by robots.txt.
Can I use it with WordPress, Wix or Squarespace?
Yes. Most site builders let you upload a favicon (often called a site icon) in their settings. Usually you only need the 512px PNG or favicon.ico.
Is my logo stored on a server?
No. The favicon is created in your browser, and your image is not sent anywhere.