Favicon Generator
Turn your logo into a favicon.ico and PNG icons in every size, with a manifest file and ready HTML lines.
Drop your logo here or choose it
A square PNG of 512 pixels or more works best · up to 12 MBAdd these lines inside the head tag of your site
How to use it
- Drop your logo on the upload area or choose it.
- Check the preview at small sizes, and set a background colour if the logo is transparent and you want one.
- Press “Download the icon pack” and unzip it into your site folder.
- Copy the HTML lines into the head tag of your pages.
Examples
- Square logoa 512×512 PNG six PNG files and a favicon.ico
- Wide logoa 600×240 logo without cropping the whole logo centred in the square
- Wide logo, croppeda 600×240 logo with the centre crop a 240×240 square from the middle of the logo
Tool details and privacy
Turn your logo into the favicon that shows in the browser tab, plus the icons phones and web apps need. You download one pack with every size and ready HTML lines.
The whole logo is shown in the middle of the square without being cut. If you would rather it filled the square, choose the centre crop.
Options
- Fit the whole logo, or crop it from the centre to fill the square.
- An optional background colour behind transparent areas.
Limits
- One image as PNG, JPG, WebP or GIF, up to 12 MB. SVG files are not supported.
- PNG files at 16, 32, 48, 180, 192 and 512 pixels.
- The favicon.ico holds the 16, 32 and 48 pixel sizes; larger sizes come as separate PNG files.
- A logo smaller than 512 pixels is enlarged, so the large icons look softer.
Privacy
The icons are made in your browser, and your logo is never uploaded.
Questions
What is a favicon?
A small image shown beside the page title in the browser tab, in bookmarks and in search results. It helps visitors recognise your site.
What favicon sizes does a website need?
A favicon.ico with 16, 32 and 48 pixel sizes, a 180 pixel icon for Apple devices, and 192 and 512 pixel icons for Android and web apps are usually enough. The pack has all of them.
Where do I put the files?
Put them in the root folder of your site, then paste the lines from usage.html inside the head tag. If you use another folder, adjust the paths in those lines.
Why does my iPhone icon have a black background?
iOS fills transparent areas of the icon with black. Tick “Put a colour behind transparent areas” and choose a suitable colour before downloading.