Favicon Generator

Create favicons from an image or text in all standard sizes

Drop an image here or click to upload

PNG, JPG, SVG, or WebP

Preview

HTML Link Tags

Favicon Sizes You Need

SizeFilenameWhere It Is Used
16x16favicon-16x16.pngBrowser tab (standard)
32x32favicon-32x32.pngBrowser tab (Retina / high-DPI)
48x48favicon-48x48.pngWindows taskbar, some browsers
180x180apple-touch-icon.pngiOS home screen bookmark
192x192android-chrome-192x192.pngAndroid Chrome home screen
512x512android-chrome-512x512.pngPWA splash screen, Google search

How to Add a Favicon to Your Website

  1. Generate your favicons using the tool above -- either upload an image or create one from text.
  2. Download the PNG files and place them in your website root directory.
  3. Copy the HTML link tags from the tool output and paste them into the <head> section of your HTML.
  4. Test in different browsers and devices. Check the browser tab, bookmarks bar, and mobile home screen.
  5. For PWAs, also reference the 192x192 and 512x512 icons in your manifest.json file.

Favicon Formats: ICO vs PNG vs SVG

ICO is the legacy format that can bundle multiple sizes in a single file. It is only required if you need to support Internet Explorer 10 and older. Modern browsers do not need it.

PNG is the recommended format for modern favicons. It offers excellent quality at small file sizes and is supported by all current browsers. Use multiple PNG files with the appropriate <link> tags to serve different sizes.

SVG favicons are the newest option, supported in Chrome, Firefox, and Edge. They scale perfectly to any size and support dark mode via CSS media queries inside the SVG. Declare them with <link rel="icon" type="image/svg+xml" href="/favicon.svg">.

For maximum compatibility, use PNG files for all sizes and optionally add an SVG favicon as a progressive enhancement.

Frequently Asked Questions

What sizes do I need for a favicon?

At minimum, you need 16x16 and 32x32 for browser tabs, 180x180 for Apple touch icon, and 192x192 for Android. If you are building a Progressive Web App, also include 512x512 for splash screens. This tool generates all six standard sizes automatically.

Should I use ICO or PNG for my favicon?

Use PNG. All modern browsers support PNG favicons, and they offer better quality and smaller file sizes than ICO. ICO is only needed for Internet Explorer 10 and earlier. Declare your PNG favicons with link tags specifying each size.

Can I create a favicon from text?

Yes. Switch to the Text tab in this tool, enter 1-2 characters, choose your text and background colors, and generate. This is a fast way to create a recognizable favicon without any graphic design work.

How do I add a favicon to my website?

Place the PNG files in your website root directory and add link tags to your HTML head. At minimum include: a 32x32 icon link and a 180x180 apple-touch-icon link. This tool generates the exact HTML you need -- just copy and paste it.