Skip to content
FR

Favicon generator

Create your site's favicon from letters, an emoji or your logo: favicon.ico, PNG, Apple and Android icons, manifest and HTML code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Create every icon your site needs at once: from letters or an emoji (font, colors, square, rounded or round shape) or from your logo. You get favicon.ico, favicon.svg, 16 and 32 px PNGs, the 180 px Apple icon, 192 and 512 px Android icons, the site.webmanifest file and the HTML code to paste.

When to use it

New website or blog

A favicon with the site's initial on its main color takes a minute and makes the tab recognizable.

Web app icon

With the manifest and Android icons, the site can be added to a phone's home screen like an app.

Existing logo

Choose your logo: it is cropped to a square with an adjustable margin and produced at every size.

How to use

  1. Choose letters, an emoji or your logo.
  2. Set the colors, shape and size while watching the real-size preview.
  3. Create the files, download them and copy the HTML code.

How it works

Each size is drawn separately in a canvas (not scaled down from a large image), which keeps small icons sharp. Text is centered on the letters' real height and shrunk if it exceeds 90% of the width.

The .ico file is assembled byte by byte: a header, one entry per size, then the PNG images, a format accepted by every browser. Everything is produced on your device.

Tips for best results

  • One or two letters at most: at 16 px, a whole word is unreadable.
  • Pick highly contrasted colors, the icon is tiny.
  • Check the 16 px preview, the real size of a browser tab.
  • Clear the browser cache after changing a favicon: the old one stays visible for a long time.

Common problems and fixes

The old favicon still shows

Browsers cache favicons. Reload with Ctrl+F5, or open the page in a private window.

The emoji looks different

Emoji depend on the system. In the PNG and ICO files, your device's emoji is drawn; favicon.svg uses the visitor's.

The logo is cropped

It is cropped to a square. Increase the margin, or prepare a square version of the logo.

Frequently asked questions

Which files does a favicon need?

favicon.ico (16, 32 and 48 px) for every browser, a 32 px PNG, apple-touch-icon.png (180 px) for the iPhone home screen, and two 192 and 512 px icons for Android with the site.webmanifest file. The tool creates all of them.

Where do I put the files?

At the root of the site (next to the home page), then add the provided HTML code inside the head tag of your pages.

Why isn't the Apple icon transparent?

iOS replaces transparency with black on the home screen, so the Apple icon always gets your background color.

Can I use an emoji?

Yes. In text mode, a favicon.svg is also created: sharp at every size and very light.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.