Design
Favicon Generator
Create the complete favicon package from an image, letters or an emoji: favicon.ico, SVG, PNGs, Apple touch icon, Android and maskable icons, web app manifest and the matching HTML code – as a ZIP, without uploading.
- Runs entirely in your browser
- No data upload
- No sign-up
- Free
Source
Background & shape
The Apple touch icon and the maskable icon always get an opaque, square background – iOS and Android round the corners themselves.
Details for the web app manifest
Preview
Generating …Files
Add to the <head>
Guide
How it works
- Choose a source
Enter letters or an emoji – or upload your own image or logo, ideally square and at least 512 × 512 pixels, ideally as SVG.
- Design
Set the background color, shape (square, rounded, circle) and padding. The preview immediately shows how the icon looks in a browser tab and on a phone.
- Download
With “All as ZIP” you get all files at once. Upload them to the root folder of your website (or the folder you specified).
- Include
Add the HTML code on the right to the <head> of every page. It may take a while until browsers show the new favicon – they cache old icons for a long time.
FAQ
Frequently asked questions
Which favicon files do I really need?
Only a few today: favicon.ico for older browsers and programs, favicon.svg for modern browsers, apple-touch-icon.png (180 px) for iPhone and iPad and two Android icons (192 and 512 px) in the web app manifest. This is exactly the package the tool creates.
What is a maskable icon?
Depending on the manufacturer, Android crops app icons round, square or teardrop-shaped. A maskable icon therefore has a full-bleed background and keeps the content in the central safe zone (80%) so nothing important is lost when cropping.
Why is the Apple touch icon not transparent?
iOS fills transparent areas with black and rounds the corners itself. That is why this icon always gets an opaque, square background in the chosen color.
Why do I still see the old favicon?
Browsers cache favicons stubbornly. A hard reload (Ctrl+F5), a new tab or a version suffix such as favicon.ico?v=2 in the HTML code helps.
Can I use my logo?
Yes – ideally as SVG. Detailed logos are hardly recognisable at 16 × 16 pixels, though. Often just the symbol or the initial letter works better than the full logo with text.
Are my images uploaded?
No. Everything – including creating the ZIP file – happens in your browser.