Favicon generator

Upload one source image and export the icon set needed for desktop browsers, iOS home screens, Android, and manifest-driven installs.

Upload an image

PNG, JPG, and SVG supported. A 512x512 source or larger works best.

Live preview

New Tab
16x16
Web
32x32
Web
48x48
Legacy
Apple Touch
180x180
Apple Touch

HTML snippet

<!-- Add inside <head> -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Favicon best practices

Why multiple sizes matter

Different platforms use different icon sizes. Shipping the full set keeps icons sharp in tabs, shortcuts, install flows, and app-like launches.

PNG vs ICO

Modern browsers handle PNG favicons well. ICO mostly exists for legacy compatibility, while PNG provides better transparency and simpler generation.

Platform icon guide

16x16 / 32x32

Desktop browser

Used for tabs, bookmarks, and browser history lists.

180x180

iOS / iPhone

Used when the site is added to the home screen. Opaque artwork usually works best.

192x192 / 512x512

Android Chrome

Used alongside a web manifest for install prompts, splash screens, and task switchers.

Quick installation guide

1

Download and extract

Use the download button to export a zip file that contains PNG assets, manifest files, and the head snippet.

2

Upload to your public root

Place the extracted files where they are publicly reachable, such as the site's public directory.

3

Add the head markup

Copy the generated head snippet into your document head and clear browser cache to verify the new icons.

Frequently asked questions

What is included in the zip file?

The zip contains common browser favicon PNGs, Apple touch icons, Android icon sizes, and a site.webmanifest file.

What is site.webmanifest?

It is a JSON manifest that tells browsers how the site should behave when installed to a home screen or launched like an app.

How do I use these icons?

Upload the generated files to your public root and include the generated head markup on the pages that should expose the favicon.