How to use Favicon Generator
- 1Drop your logo as PNG, JPG, SVG or WebP. Square and 512 px or larger works best.
- 2Adjust padding, background color and corner rounding while watching the live previews.
- 3Check the browser tab mockups and the actual-size icons, then set your site name and theme color.
- 4Click Download ZIP to get all files.
- 5Upload the files to your site's root folder and paste the HTML snippet into the head of your pages.
What you get
- favicon.ico with 16, 32 and 48 pixel images, for browsers, bookmarks and Windows.
- favicon-16x16.png and favicon-32x32.png for modern browsers.
- apple-touch-icon.png (180 x 180) for iPhone and iPad home screens.
- android-chrome-192x192.png and 512x512, referenced by site.webmanifest for Android and installable web apps.
- favicon.svg when you start from an SVG, so modern browsers get a perfectly sharp icon at any size.
- A ready-to-paste HTML snippet, also included in the ZIP.
Design tips for small icons
At 16 pixels, fine detail and thin text disappear. Use a simple mark or one or two letters rather than your full logo. Check the 16 px zoomed preview to see exactly which pixels will show. Add a little padding if your logo touches the edges, and pick a background color if your logo is dark and needs to stand out on dark browser tabs; the light and dark tab mockups show both cases.
iPhones fill transparent areas of the Apple touch icon with black, so when your favicon has a transparent background the touch icon gets a solid color you choose (white by default). Apple also rounds the corners itself, so the touch icon is saved square.
Installing the favicon
Copy all files into the root folder of your website, next to your home page, then paste the snippet inside <head>. Browsers cache favicons for a long time, so open the site in a private window or do a hard refresh to see the change. If you need other sizes of your logo, use Resize Image. Your image is processed in your browser and never uploaded.
Frequently asked questions
Which sizes are inside the favicon.ico?
16 x 16, 32 x 32 and 48 x 48 pixels, stored as PNG images inside the ICO file, which every current browser and Windows version supports.
Do I still need a favicon.ico?
Yes, it is still the most reliable fallback. Some tools, RSS readers and older browsers request /favicon.ico directly even without a link tag.
Can I make a round favicon?
Yes. Choose Circle under Corners, and pick a background color for a round colored tile. With a transparent background the image itself is clipped to a circle.
What image should I upload?
An SVG or a square PNG of at least 512 x 512 pixels. Smaller images work but the 512 pixel Android icon will be upscaled and look soft.
Where do I put the files?
In the root folder of your site, so they are reachable at addresses like example.com/favicon.ico. Then paste the HTML snippet into the head of every page or your site template.
Is my logo uploaded?
No. All icons are drawn by your browser on your device.