This favicon generator makes a complete set of website icons from one or two letters, an emoji or your logo. You get favicon.ico, favicon.svg, PNG sizes, the Apple touch icon, Android and maskable icons, a web manifest and the HTML to paste into your page head. It runs in the browser and your logo is never uploaded.
How to use
- Type one or two letters or an emoji, or switch to Image and drop your logo (SVG works best).
- Pick the background, text color, shape and padding. The previews update as you go.
- Download everything as a ZIP, or tap a single file to download it.
- Copy the HTML snippet into your page’s <head> and upload the files to your site’s root folder.
- favicon.ico holds 16, 32 and 48 px icons as PNG for every browser; favicon.svg stays sharp at any size.
- apple-touch-icon.png is square and opaque because iOS rounds the corners itself.
- The maskable icon keeps your logo inside the safe zone so Android can crop it to any shape.
- Everything is generated in your browser; your image is never uploaded.
What a modern favicon set contains
favicon.ico holds 16, 32 and 48 px images and is still requested by many browsers and tools at the site root. favicon.svg stays sharp at any size and is used by current browsers. apple-touch-icon.png (180 × 180) appears when someone adds your site to an iPhone home screen. android-chrome-192x192 and 512x512 plus a maskable 512 px icon are listed in site.webmanifest for Android and installable web apps.
The HTML snippet links all of them, so you only copy it into the head and upload the files to the root folder.
Designing an icon that reads at 16 px
A favicon is shown as small as 16 × 16 pixels in a browser tab. One or two bold letters, a simple symbol or the plain mark from your logo work far better than a full logo with text. Strong contrast between background and foreground helps in both light and dark browser themes. Check the light and dark browser tab previews before downloading.
Apple and maskable icons
iOS rounds the corners itself and does not support transparency well, so the Apple touch icon is square and opaque. Android can crop maskable icons to circles, squircles or other shapes; the generator keeps your design inside the safe zone so nothing important is cut off.
Frequently asked questions
What size should a favicon be?
Provide several: 16, 32 and 48 px inside favicon.ico, an SVG for any size, 180 × 180 for Apple devices and 192 and 512 px for Android. This generator creates all of them at once.
Do I still need favicon.ico?
Yes. Some browsers, feed readers and other tools still look for /favicon.ico at the root of the site, so keeping it there avoids missing icons and 404 requests.
How do I add the favicon to my website?
Upload the files from the ZIP to the root folder of your site and paste the HTML snippet into the head of every page. Then reload with a cleared cache to see the new icon.
Why doesn't my new favicon show up?
Browsers cache favicons aggressively. Open the icon URL directly, do a hard reload, or test in a private window. It can take a while before search results show the new icon.
Can I use an emoji as a favicon?
Yes. Type an emoji, choose a background and shape, and the icon is drawn from it. Emoji look slightly different on each operating system, and the downloaded files keep the look of the device you made them on.
Is my logo uploaded?
No. All icons are drawn and packed into the ZIP in your browser, so your logo stays on your device.