Favicon Generator
Turn a logo into a favicon.ico, PNG icons and an Apple touch icon. Download them all as one ZIP and copy the HTML for your site.
100% client-sideYour files stay in your browser.
- Free, no signup
- ICO + PNG icons in one ZIP
- HTML snippet included
The Apple touch icon always gets a solid background (white if you choose transparent), because iPhones fill transparent areas with black.
Preview
How to use Favicon Generator
- Drop your logo or image onto the tool, or choose a file. A square image works best.
- Adjust the padding, background and shape until the preview looks right at small sizes.
- Download the ZIP, or save any single icon from the list.
- Upload the files to your site's root folder and paste the HTML snippet into your page's head.
Features
- favicon.ico containing 16, 32 and 48 px images
- PNG icons at 16, 32 and 48 px, plus a 180 px Apple touch icon and 192 and 512 px app icons
- Padding, background colour and square, rounded or circle shapes
- A live preview at the sizes browsers really use, including 16 px
- A ready-to-paste HTML snippet and web app manifest icon entries
- Created on your device — your logo is never uploaded
What can you use Favicon Generator for?
A favicon is the small icon shown in browser tabs, bookmarks and search results. Sites also need a larger icon for phone home screens. This generator makes the whole set from one image, so you do not have to resize and export each size by hand.
One image does not fit every place a site icon is used. Tabs show it at 16 or 32 pixels, iPhones want a 180 pixel Apple touch icon, and installed web apps use 192 and 512 pixel icons. A logo that looks fine large can turn into a smudge at 16 pixels, which is why the tool previews the small sizes before you download.
- Giving a new website or blog its first favicon.
- Making the icons a progressive web app needs (192 and 512 px).
- Replacing a favicon that looks blurry because it was just scaled down.
- Producing an Apple touch icon so a saved site looks right on an iPhone home screen.
Tips for better results
- Start from a simple, bold mark. Fine detail and small text disappear at 16 pixels.
- Use a square source image of at least 512 × 512 pixels. A non-square image is centred, not stretched.
- Add a little padding so the icon does not touch the edge, especially with the circle shape.
- The Apple touch icon always gets a solid background, because iPhones fill transparent areas with black.
Frequently asked questions
Does the Favicon Generator upload my logo?
No. The icons are drawn and packaged in your browser. Your image never leaves your device.
Which favicon sizes do I need?
A favicon.ico (16, 32 and 48 px) and a 32 px PNG cover browsers. Add a 180 px Apple touch icon for iPhones and 192 and 512 px icons if your site is installable as an app. The ZIP contains all of them.
Do I still need a .ico file?
Modern browsers accept PNG favicons, but a favicon.ico in your site root is still requested by some browsers, crawlers and tools, so it is worth having.
Where do I put the files?
Upload them to the root folder of your site, then paste the snippet into the head of your pages. If you use a different folder, change the paths in the snippet.
Why does my favicon not change after I upload it?
Browsers cache favicons aggressively. Try a hard refresh, open the site in a private window, or rename the file and update the link.
Can I use a non-square image?
Yes. The image is fitted inside a square and centred, so it is never stretched. For the best result, start from a square image.