What you get
One image goes in and a full set of icons comes out, ready to upload to the root of your website.
- favicon.ico with 16, 32 and 48 pixel versions, for browser tabs and bookmarks.
- favicon-16x16.png, favicon-32x32.png and favicon-48x48.png as separate PNG files.
- apple-touch-icon.png at 180 by 180 pixels, for iPhone and iPad home screens.
- android-chrome-192x192.png and android-chrome-512x512.png, for Android home screens and installable web apps.
- site.webmanifest, which lists the Android icons.
- favicon-code.html, the link tags to place in the head of your pages.
Download the files one at a time, or take all of them in one ZIP.
How to use it
- Choose an image, or drop it on the box. The page starts with a sample so that you can see the result.
- Adjust the shape, padding and background until the preview looks right at small sizes.
- Download the ZIP, upload the files to your site root, and paste the code from the box into the head of your pages.
Options
- Shape: keep the square, or round the corners, or cut a circle.
- Fit: Fit inside shows the whole picture. Fill crops the picture so that it covers the icon.
- Padding: adds space around the picture, which stops a logo from touching the edge.
- Background: keep it transparent or fill it with a color. The Apple touch icon always gets a solid background, because iPhones draw transparent areas in black.
Tips for a good favicon
A favicon is shown at 16 pixels, so detail disappears. Use a simple mark or a single letter rather than a full logo with small text. Start from a square image of at least 512 pixels, or an SVG. Check the tab on both a light and a dark background with the favicon preview.
No logo yet? The favicon generator can make an icon from a letter or an emoji. Everything happens in your browser, so your image is never uploaded. If you need only one part of the set, use PNG to ICO or the Apple touch icon maker. To check which sizes you really need, use the favicon size tool or read the favicon size guide.