ToolPetal
Favicon generator
- Runs on your device
- Nothing uploaded
- Free, no sign-up
The emoji is drawn with your device's emoji font, so it looks the way emoji look on your system.
A square image of 512 px or more works best. It is read on your device and not uploaded.
Real size: 16 px in a browser tab, and 32 px.
HTML for your <head>
site.webmanifest
How to use the favicon generator
- Pick a source. Text makes a letter favicon, Emoji draws one emoji, and Image turns your logo or any picture into icons (this is also a PNG to ICO converter).
- Style it. Choose the size, a rounded, square or round shape, and a background color, or untick Fill background for a transparent icon.
- Check it small. The tab preview shows the icon at 16 and 32 pixels, which is how most people will see it. Bold, simple shapes read best at that size.
- Download. Download all gives a zip with every file, the manifest and the HTML tags. Upload the files to the root of your site and paste the tags into the <head> of your pages.
What is in the zip
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Every browser, and the /favicon.ico address that browsers and crawlers ask for |
| favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs and bookmarks |
| apple-touch-icon.png | 180 px | iPhone and iPad home screen |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px | Android home screen and installed web apps, through site.webmanifest |
| site.webmanifest, head-snippet.html | text | The manifest, and the link tags to paste |
Examples
- Letter favicon: type TP, keep Bold and Rounded square, and pick your brand color as the background.
- Emoji favicon: choose Emoji, paste a single emoji such as a flower, and untick Fill background for a transparent icon.
- Logo to ICO: choose Image, open a square PNG logo of 512 px or more, and set Padding to Small so it does not touch the edges.
About the ICO file
The favicon.ico stores each size as a PNG inside the ICO container. Current browsers and Windows Vista and later read this format. iPhones and iPads show transparent areas of the apple-touch-icon as black, so keep the background filled if you care about the home screen look.
Questions
How do I make a favicon?
Choose Text, Emoji or Image, style it, and press Download all. You get favicon.ico, PNG icons in the usual sizes, an apple-touch-icon, a web manifest and the HTML tags to paste into your page head.
Can I convert a PNG to ICO?
Yes. Choose Image and open your PNG. The favicon.ico you download holds 16, 32 and 48 pixel versions of it.
What size should a favicon be?
Browsers show favicons at 16 or 32 pixels, the ICO file usually holds 16, 32 and 48, iPhones use a 180 pixel apple-touch-icon, and Android uses 192 and 512 pixel icons from the manifest. This tool makes all of them.
Can I make an emoji favicon?
Yes. Choose Emoji and paste one emoji. It is drawn with your device's emoji font, so the style matches the emoji on your system.
Where do I put the favicon files?
Upload them to the root folder of your website, so favicon.ico is at yoursite.com/favicon.ico, and paste the link tags into the head of each page.
Is my image uploaded?
No. The icons are drawn in your browser and the files are made on your device.