Favicon Generator

What Does a Favicon Generator Create?

A favicon generator turns a logo, symbol, or image into the small icons used by websites. These icons can appear in browser tabs, bookmarks, shortcuts, search results, and installed web apps.

TryFormatter can create a favicon package from one source image. Depending on the package options you choose, the download can include PNG favicons, a multi-size favicon.ico, an Apple Touch icon, Android app icons, a site.webmanifest file, and HTML code for adding the files to your website.

How to Create a Favicon Package

1. Choose an image: Select or drop a PNG, JPG, WebP, or SVG logo into the tool.
2. Fit the artwork: Use Fit Icon to keep the complete logo visible or Fill Canvas to cover the full square area.
3. Adjust the appearance: Change the scale, position, padding, background colour, or icon shape when needed.
4. Select the files: Choose an Essential or Complete package, or select the individual favicon files you need.
5. Review the previews: Check how the icon looks at small browser-tab sizes before generating the package.
6. Generate and download: Download individual files or save the complete favicon package as a ZIP file.

Recommended Source Image

A clear source image helps the favicon remain recognisable at very small sizes.

• Use a square image: A 1:1 image is easier to resize without cutting important parts of the logo.
• Start with a large file: A 512 × 512 pixel image or an SVG gives the generator enough detail for both small and large icon files.
• Keep the design simple: Bold shapes, short initials, and clear symbols usually work better than long text or detailed illustrations.
• Use good contrast: Make sure the main symbol can be seen on both light and dark backgrounds.
• Leave some space around the logo: Padding can prevent the artwork from touching the edge or being cut by rounded app-icon shapes.

Favicon and App Icon Files Included

The generated files depend on the package and options selected in the workspace.

Favicon Files and Web App Icons

Favicons and web app icons are related, but they are not exactly the same.

A favicon usually appears in browser tabs, bookmarks, history, and search results. Files such as favicon.ico and favicon-32x32.png are commonly used for this purpose.

Web app icons are declared inside site.webmanifest. A browser or operating system may use these larger icons when a website is installed as an app or added to a device launcher.

PNG Favicons and favicon.ico

PNG files support clear edges and transparent backgrounds. They are useful when you want to provide a specific icon size such as 16 × 16 or 32 × 32 pixels.

An ICO file can hold several icon sizes inside one file. This generator creates a multi-size favicon.ico containing 16 × 16, 32 × 32, and 48 × 48 versions when that file is included in the selected package.

You can publish both ICO and PNG files. The browser can choose an available icon based on the declared file type, size, and its own support.

How to Create a Favicon for Google Search

Google may show a website favicon beside the site name in search results. To make the favicon eligible, use a square icon, add a favicon link to the homepage, and make sure both the homepage and icon file can be crawled.

• Use a square 1:1 favicon.
• Use an image larger than 48 × 48 pixels when possible.
• Keep the favicon URL stable instead of changing the filename often.
• Make the design clearly connected to your website or brand.
• Do not block the favicon or homepage in robots.txt.

Google may take time to recrawl the homepage and process a new favicon. Meeting the requirements does not guarantee that the icon will appear in every search result.

Why Padding Matters

Padding creates space between the artwork and the edge of the icon. It can make a logo easier to recognise at small sizes and reduce unwanted cropping when a device applies a rounded or circular shape.

Check the 16 × 16 and 32 × 32 previews before downloading. If the logo looks crowded, reduce its scale or add more padding.

Transparent or Solid Background

A transparent background works well for symbols that remain visible on both light and dark surfaces. However, dark artwork can disappear on a dark browser tab, while white artwork can disappear on a light background.

Choose a solid brand colour when your logo needs a consistent background. Preview the result at its real small size instead of checking only the enlarged preview.

What Is site.webmanifest?

A Web App Manifest is a JSON file that provides information about a website when it is installed as an app. It can include the app name, short name, start URL, display mode, theme colour, background colour, and icon files.

The manifest helps supported browsers understand how the installed web app should appear. A manifest alone does not provide offline support or all other Progressive Web App features.

How to Add Favicons to a Website

Place the downloaded icon files in your website's public folder or another location that can be opened directly through a URL.

Add the following tags inside the page <head>:

<link rel="icon" href="/favicon.ico">
<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">

Check that every path matches the actual file location. Open each URL directly in the browser to confirm that the file is publicly available.

Why Is My New Favicon Not Showing?

• Browser cache: Browsers may continue showing a saved favicon. Try a hard refresh, clear the site's cache, or test in a private window.
• Incorrect file path: Make sure the path in the HTML link tag matches the real icon location.
• Old HTML: Check that the latest page includes the updated favicon link.
• Search recrawl delay: Search engines may need time to revisit the homepage and find the new favicon.
• Weak small-size design: Thin lines, long text, or low contrast may make the icon difficult to see at 16 × 16 pixels.

Use cases and examples for site favicons

Common use cases for a favicon generator include building icon sets for production websites, Progressive Web Apps (PWAs), mobile web shortcuts, and client branding packages. Examples include creating multi-resolution favicon.ico files for desktop browsers alongside high-density PNG icons for iOS and Android home screens.

Privacy and Browser Processing

Your selected logo is processed inside your browser to create the favicon files. Image resizing, preview generation, ICO creation, manifest creation, and ZIP packaging are handled in the browser workspace.