Favicon generator
Make a site icon from a logo, letters or emoji and download the full set: favicon.ico, icons for iPhone and Android, a manifest and code to paste.
In a browser tab
All sizes
Files
Code for <head>
Put the files in the root of your site, next to the home page, and paste this code inside the head tag on every page.
A favicon in a couple of minutes
- 1Choose a baseletters, emoji or your own image
- 2Adjust the lookcolors, font, rounding and size
- 3Download the seta ZIP with icons, a manifest and code
Text, emoji or image
Letters on a colored background are the most common choice: the first letter of the name is readable even at 16 px. Emoji are a quick way to get a bright icon without a designer. A logo should be square and without small details: at 16 px everything small blends together.
Check the small size
Look at the tab preview in the light and dark themes. If the symbol gets lost on a dark tab, add a background or choose a brighter color. Padding around the image helps when the logo touches the edges.
What to do with the files
Put all the files from the archive in the root of your site, next to the home page, and paste the code into the head section. In WordPress, Tilda and other site builders, it's usually enough to upload favicon.ico or a 512 px PNG in the site settings.
FAQ
Didn't find an answer? Message us and we'll help.
Here you create your own icon from scratch. "Site favicon" does the opposite: it finds and downloads, by link, the icons another site already uses.
At minimum, favicon.ico in the site root: all browsers look for it. A 32 px PNG gives a sharp icon in the tab, apple-touch-icon.png at 180 px gives the icon on the iPhone screen, and site.webmanifest with 192 and 512 px icons is needed for Android and PWA.
Three images: 16, 32 and 48 px in PNG format. The browser and Windows pick the right size themselves.
iOS rounds icon corners on the "Home" screen itself and fills transparent areas with black. That's why we save apple-touch-icon as a square with a background: white, if you chose transparent.
Yes. Emoji are drawn with your system font: Apple style on iPhone, Microsoft style on Windows, Google style on Android. The file gets the look you see in the preview.
Unzip the archive into the root of your site and paste the code from the "Code for <head>" block inside the head tag. If the icon hasn't changed, reload the page without cache: browsers remember the old favicon for a long time.
Try also
Also free, no sign-up