ToolsHub
Generator Tools

Favicon Generator

Generate a complete, up-to-date favicon set in one go. Start from your logo or simply type a letter or emoji, preview it in a browser tab and download a ZIP with the HTML to paste in.

  • Runs in your browser
  • No sign-up
  • Free to use

How to use Favicon Generator

  1. Choose Image and upload a square logo, or choose Text and type one or two letters or an emoji.
  2. For text, pick the font, colours and corner shape.
  3. Check the previews at real tab and home-screen sizes.
  4. Download the ZIP, upload its files to your site's root folder and paste the HTML into your page head.

Favicon Generator features

Complete modern set

favicon.ico (16, 32, 48), PNG favicons, a 180 px Apple touch icon, 192 and 512 px Android icons and a web manifest.

Text and emoji favicons

Make an icon from initials or an emoji with custom colours and rounded or circular backgrounds.

Real-size previews

See the icon as it appears in a browser tab and on a phone home screen.

Ready-to-paste HTML

The link tags you need, matched to the files in the ZIP.

Transparent backgrounds kept

Logos with transparency stay transparent where the format allows.

Generated locally

Your logo is processed in the browser.

When to use Favicon Generator

  • Adding a proper favicon to a new website or web app.
  • Replacing a blurry or outdated favicon with a full modern set.
  • Making a quick placeholder icon from initials while a logo is designed.
  • Creating home-screen icons for a progressive web app.

Favicon Generator FAQ

Which favicon files does a site need today?

A favicon.ico in the root for older browsers and tools, a 32 px PNG for modern browsers, a 180 px Apple touch icon for iOS home screens, and 192 and 512 px icons referenced from a web manifest for Android and installable web apps. This generator creates all of them.

What size should my source image be?

At least 512 × 512 pixels and square. Simple, bold artwork reads better at 16 pixels than a detailed logo.

Where do I put the files?

In the root folder of your site, next to your home page, so that /favicon.ico resolves. Then add the HTML tags to the head of every page.

Why does my old favicon still show?

Browsers cache favicons aggressively. Clear the cache or open the site in a private window to see the new one.

Why is the Apple touch icon not transparent?

iOS fills transparent areas with black, so the Apple icon is given a solid background using your chosen background colour.

PNG to ICO Create a proper .ico file from a PNG, with every size you need packed into one… SVG to PNG Render an SVG as a crisp PNG at exactly the size you need. Upload a file or paste… Color Palette Generator Create a harmonious colour scheme from a base colour, or pull a palette out of a… Meta Tag Generator Fill in a few fields and get a complete, correctly escaped set of meta tags for…

Why one favicon file is no longer enough

The favicon began as a single 16-pixel favicon.ico. Today the same small image appears in browser tabs, bookmarks, history lists, phone home screens, task switchers and app launchers, each at a different size and with different rules about transparency and shape.

Browsers pick the most suitable icon from the link tags in your page. Supplying a sharp PNG for tabs, a solid square Apple touch icon and manifest icons for Android means each platform gets an image designed for its size instead of scaling up a tiny one. Keeping the design simple, with strong contrast and few details, ensures it stays recognisable at 16 pixels.

Other useful tools