Favicon Generator: Create favicon.ico, PNG and Apple Touch Icons
Create favicon.ico, PNG favicons, an Apple touch icon and a web app manifest from an image or text in your browser, with HTML tags to copy.
Drop an image here or choose one
PNG, JPG, WebP, GIF (first frame), BMP or SVG. A square image of at least 512 × 512 pixels works best.
The text is drawn with the fonts installed on this device, so letters and emoji can look different on another computer or phone. The downloaded PNG and ICO files keep the look you see here.
Preview
16, 32 and 48 are shown at their real size; the larger icons are shown smaller. The chequered pattern marks transparent areas.
In a browser tab
A simplified tab bar in a light and a dark theme. Check that the icon is visible on both: a dark logo on a transparent background can disappear on a dark tab bar.
Files
Some Apple devices show transparent parts of a home screen icon as black, so apple-touch-icon.png is saved without transparency: transparent areas are filled with this colour. The shape setting is not applied to it, because iPhone and iPad round the corners of home screen icons themselves.
Used in the HTML tags and the manifest. "/" means the root folder of the website.
The background, shape, padding and crop settings are not applied to favicon.svg.
Browsers can use the theme colour to tint the address bar or the window title. The app background colour is shown while an installed web app starts.
Choose an image or switch to text to start.
Contents of site.webmanifest
Notes
- Upload the files to the root folder of your website (the folder that contains the home page), or enter another folder above so that the paths in the HTML and the manifest match.
- favicon.ico contains 16 × 16, 32 × 32 and 48 × 48 images stored as PNG data. Current browsers and Windows Vista or later can read this; some very old programs only read uncompressed icon images.
- Small sources, such as a 64 × 64 image, are enlarged for the bigger icons and look blurry. Use an image of at least 512 × 512 pixels or an SVG file if you can.
- Text icons use the fonts installed on the device you create them on. The PNG and ICO files keep that look, but creating the icon again on another device can give a different result.
- SVG files are drawn by your browser. Images, fonts or styles that an SVG file loads from other files or websites are not loaded and may be missing from the icons.
- Browsers keep favicons in their cache for a long time. After you replace a favicon, the old one can still appear for a while; a hard refresh, a private window or a changed file name in the HTML can help.
- Images and text are processed in your browser and are not uploaded to LeedyBox.
How to use
- Choose Image and select or drop your logo, or choose Text or emoji and type up to three characters.
- Set the background, shape and padding, and check the previews and the browser tab in the light and dark theme.
- Optionally enter the website name, short name, theme colour and the folder where the files will be stored.
- Press "Create favicon files", then download the files one by one or all together as favicon-package.zip.
- Upload the files to your website and paste the copied HTML tags into the head section of your pages.
Frequently asked questions
Are my images uploaded to a server?
No. The image or text is drawn and converted in your browser, and the files are created on your device. Nothing is sent to LeedyBox. Only the ZIP library is downloaded when the page loads, from leedybox.com itself.
Which images can I use, and are there limits?
PNG, JPG, WebP, GIF (first frame), BMP and SVG files. SVG files can be up to 10 MB. Very large photos (above about 50 megapixels) can fail on phones because of the memory they need. A square image of at least 512 × 512 pixels, or an SVG file, gives the sharpest results.
Why does my favicon look blurry or hard to read?
A 16-pixel icon has very little room. Simple shapes, strong contrast and one or two letters work better than detailed logos or long text. Small source images are enlarged for the bigger sizes and look blurry. Check the previews and try less padding or a simpler version of your logo.
Which of these files do I need?
favicon.ico and the 16 and 32 pixel PNG files are used by desktop browsers, and apple-touch-icon.png by iPhone and iPad. The 192 and 512 pixel icons and site.webmanifest are used when the site is added to a home screen or installed as a web app. Using all of them with the HTML tags covers the common cases.
Why does apple-touch-icon.png have no transparency?
Some Apple devices show transparent parts of a home screen icon as black. The tool therefore fills transparent areas with the colour you choose (white by default) and leaves the corners square, because iPhone and iPad round them.