How to Make a Favicon: 5 Ways, From Text, Emoji or AI

To make a favicon, start from one bold square design, turn it into a 32 × 32 px favicon.ico and an SVG, and add two <link> tags to your site’s <head>. You can get the design from a logo, a single letter, an emoji, an AI icon generator or a few lines of SVG code. Which one is right depends on what you already have, and what matters most is that the result is still clear at 16 px, the size of a browser tab icon.

This guide helps you pick a method, walks through each of the five, compares them at real tab size and ends with the tags that install the favicon.

Which method should you use to make a favicon?

Use the method that matches what you already have: a logo file, only a name, a wish for something playful, a symbol idea or some code skills.

Whichever you pick, the end result is the same small set of files, which our favicon sizes guide explains in full.

How do you make a favicon from a logo or image?

To make a favicon from a logo or image, drop the image into a converter, check how it looks at 16 px and download the files. Our free favicon converter accepts PNG, JPG, WebP or SVG, works best with a square logo of 512 px or more, and gives you favicon.ico with 16, 32 and 48 px versions, the Apple touch icon, Android and maskable icons, a site.webmanifest and the HTML to paste. It runs in your browser, so the image isn’t uploaded.

The one thing to decide is what to feed it. A logo with a name and a tagline can’t be read at 16 px: in our comparison below, the made-up “Lumo” lockup turned into a blur, while its lantern symbol on its own stayed clear. Crop to the symbol, or add a solid background behind it, before you convert.

How do you make a favicon from a letter or text?

To make a favicon from a letter, put one bold character on a coloured tile in an SVG. This is the quickest way to get a clean favicon when you only have a name:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="14" fill="#7c4dff" />
  <text x="32" y="46" font-family="system-ui, sans-serif"
        font-size="40" font-weight="700" text-anchor="middle"
        fill="#fff">A</text>
</svg>

Save it as icon.svg. In AI Icon Creator’s test, Chrome 154 on a Mac drew this as a clear white “A” at 16 px. The letter comes from the viewer’s system font, so it can look different on another system. For a site you are launching, open the file in a design tool and convert the text to outlines, which turns the letter into a path that looks the same everywhere. Use one letter, never a word.

How do you make an emoji favicon?

To make an emoji favicon, point the icon link at a data URL that draws the emoji as SVG text. You don’t need a file:

<link
  rel="icon"
  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>"
/>

In our test, Chrome 154 accepted this link as the page’s favicon, and when we rendered the SVG at 16 px the emoji drew in colour. We tested only Chrome. The emoji comes from the system’s own emoji font, so it looks different on macOS, Windows and Android, and we don’t show one in our comparison for that reason. It is a good way to label a prototype or a personal project, not a brand. Google Search’s favicon guidelines ask for a crawlable file in a format they list, and SVG isn’t on that list, so an emoji data URL is unlikely to appear in search results.

How do you make a favicon with AI?

To make a favicon with AI, describe one simple symbol, generate it in a flat, bold style and check it at 16 px. The style matters more than the prompt. In AI Icon Creator’s comparison, the same bell stayed readable at 16 px as a flat white silhouette on a blue tile, while the glossy 3D version kept its shape but lost contrast, because soft shading and a pale background leave no hard edge for a tiny size.

1. Pick one subject that stands for your site, such as a lantern, a leaf or a bolt.
2. Choose a flat or very bold style, and avoid fine detail, text and busy backgrounds.
3. Generate a few versions and shrink each to 16 px to see which one still reads.
4. Run the winner through the favicon converter.

Our guide to keeping an icon legible at small sizes has a longer checklist. Try a subject here:

How do you make a favicon in code?

To make a favicon in code, write an SVG with a coloured tile and one or two simple shapes. A lightning bolt takes three lines:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="14" fill="#ff6b35" />
  <path d="M36 8 16 36h14l-4 20 22-30H34z" fill="#fff" />
</svg>

Draw on a 64-unit square, because one pixel at 16 px is then 4 units: keep any stroke at least 4 units thick and avoid text. Our SVG favicon guide covers dark mode and the markup, and our app icon template pack includes a 64-unit favicon grid that shows each 16 px pixel.

What does a good favicon look like at 16 px?

A good favicon at 16 px has one clear shape, strong contrast between the shape and its background, no text and no fine lines. A browser tab shows it at 16 CSS px, which is 16 pixels on a standard screen and 32 on a 2× screen.

Use this checklist before you publish:

• One idea. A symbol or a single letter, not a logo lockup.
• Contrast. A light shape on a dark tile, or the reverse, rather than shades of one colour.
• A background. A solid tile works on light and dark tab bars; a transparent glyph in a dark colour can vanish on a dark one.
• Thick lines. Strokes at least 1 pixel wide at 16 px, which is 4 units on a 64-unit SVG.
• A real check. View the icon at 16 px, not enlarged.

How do you install a favicon?

To install a favicon, upload the files to your site and add two <link> tags to the <head>, plus the Apple touch icon:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

This is the minimal markup that Evil Martians’ guide to favicons recommends. The sizes="32x32" on the .ico link matters: in our Chrome 154 test, an .ico link without a sizes attribute won over the SVG, and the SVG won once the .ico link said 32x32 or 48x48. The converter’s own tags declare 48x48, so if you add an SVG link after them, Chrome used the SVG in our test too.

Two further results from the same test. A page with only a PNG favicon used the PNG, so a PNG works if you don’t want an .ico. A page with no icon tag at all made Chrome request /favicon.ico from the site root, which is why an .ico file is still worth having. Our SVG favicon guide shows seven of the combinations we tried.

Frequently asked questions

How do I create my own favicon?

You create your own favicon by designing one bold square image, exporting it as a 32 × 32 px favicon.ico and an SVG, and linking both in your page’s <head>. The fastest route is to drop a square logo into a free converter, which builds the files and the HTML for you.

How can I turn an image into a favicon?

You turn an image into a favicon by converting it to an .ico file with 16, 32 and 48 px versions. Add a square PNG, JPG, WebP or SVG to a converter such as our favicon converter, check the 16 px preview and download the pack. Crop to the symbol first if the image contains text.

How can I generate a free favicon?

You can generate a free favicon with a converter that runs in your browser, or by hand with a letter or a few shapes in an SVG, or an emoji in a data URL. An AI icon generator can make the symbol first. All five methods in this guide end with the same few files.

Can I use a PNG file as a favicon?

You can use a PNG file as a favicon: in our test, Chrome 154 used a page’s PNG when it was the only icon listed. Add <link rel="icon" type="image/png" href="/favicon.png">. Keep a favicon.ico as well, because Google Search and some tools ask for it, and add a 180 px PNG as the Apple touch icon.

Ready to make your favicon?