How to Make a Favicon from Your Existing Logo

You already have a logo. You paid a designer for it, or you spent weeks in Figma getting it right. Now you need a favicon, and the instinct is to just shrink the logo down and call it done. That works sometimes. Most of the time, it does not.

Logos are designed to be read at billboard size, business card size, maybe social media avatar size. A favicon is 16x16 pixels in its smallest form. That is a completely different challenge. The good news is that your logo is still the best starting point. You just need to extract the right piece of it and simplify.

Step 1: Isolate the Symbol

Most logos have two parts: a wordmark (the company name in text) and a symbol or icon. If your logo has a symbol, that is your favicon. Drop the text entirely. Text is unreadable at 16px unless it is a single letter, and even then it gets fuzzy fast.

If your logo is text-only, pull the first letter. Use the same font and weight. Some companies use a ligature or monogram of their initials instead. Netflix uses "N". Facebook uses "f". Both work because they are a single recognizable shape.

Open your logo in a vector editor (Figma, Illustrator, Inkscape) and delete everything except the symbol or letter. Place it on a square artboard with some padding around the edges. About 10-15% padding on each side prevents the icon from touching the browser chrome.

Step 2: Simplify for Small Sizes

This is the step people skip, and it is the reason most logo-favicons look like blobs. Details that read fine at 200px disappear at 16px. Thin lines merge together. Gradients become muddy. Small gaps fill in.

Zoom your artboard to actual pixel size (16x16) and squint at it. If you cannot tell what the shape is, you need to simplify. Remove interior details. Thicken lines. Fill in gaps. Sometimes you need a completely redrawn version of the symbol that only uses the most essential shapes.

Notice that some things get removed even at 32px. Drop shadows and outer glows never work well in favicons. They eat into your already tiny canvas and make the shape harder to read against varying browser backgrounds.

Step 3: Test at Every Target Size

Favicons show up in a lot of places, and each context uses a different size. Do not assume that what looks good at 32px will survive at 16px. Test each size individually. Some designers maintain two or three different versions of the icon with different levels of detail.

Step 4: Export with the Right Tools

Once you have your simplified symbol, you need to export it in multiple formats and sizes. You can do this manually in your design tool, but a CLI tool like sharp is faster and more repeatable. Here is a script that takes a high-resolution PNG source and generates all the sizes you need.

# Install sharp-cli globally
npm install -g sharp-cli

# Generate PNG sizes from a high-res source
sharp -i logo-symbol.png -o favicon-16.png resize 16 16
sharp -i logo-symbol.png -o favicon-32.png resize 32 32
sharp -i logo-symbol.png -o favicon-48.png resize 48 48
sharp -i logo-symbol.png -o apple-touch-icon.png resize 180 180
sharp -i logo-symbol.png -o android-chrome-192.png resize 192 192
sharp -i logo-symbol.png -o android-chrome-512.png resize 512 512

# For ICO format, use ImageMagick
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

If you are using a favicon generator tool, you can skip the manual CLI work. Upload your simplified symbol and the generator handles sizes and formats for you. But knowing how to do it manually helps when the generator output does not look right and you need to tweak things.

Common Failures (and How to Avoid Them)

A Word on Color

Stick to your brand colors, but be strategic. If your brand uses a multi-color logo, pick the single most recognizable color for the favicon. At 16px, multiple colors just create noise. The exception is if your brand identity is specifically about being multi-colored (like Google), but even then the favicon version uses simplified, solid blocks of color with clear separation.

Also consider contrast. Your favicon will appear on white backgrounds, dark backgrounds, and everything in between depending on the user's browser and OS theme. A very light icon disappears on white. A very dark one vanishes on dark mode tab bars. Medium-saturation colors with a contrasting outline or background shape tend to work best across all contexts.

When to Start Fresh

Some logos simply do not reduce well. If your logo is a detailed illustration, a complex wordmark with custom letterforms, or a shape that relies on negative space that collapses at small sizes, it may be faster to design a new favicon from scratch that shares your brand colors and general feel without trying to be a miniature version of the logo.

This is not a failure. Plenty of well-known brands have favicons that are related to but distinct from their main logo. The favicon's job is recognition at a glance in a row of browser tabs. If your simplified logo achieves that, great. If it does not, make something that does.