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.

The Extraction Hierarchy

When you sit down to turn a complex logo into a favicon, there is a priority order for what to extract. Not every approach works for every logo, so start at the top and work down until you find something that reads clearly at 16 pixels.

1. The icon mark alone. If your logo has a standalone symbol (the Apple apple, the Twitter/X bird, the Target bullseye), isolate it. Remove all text, remove any tagline, and center the symbol on a square canvas. This is the ideal case because your brand already has a recognizable shape designed to work independently.

2. A single initial. If your logo is a wordmark with no separate symbol, pull the first letter. Use the same font weight (usually bold or heavy). A single letter in a distinctive typeface can be surprisingly recognizable. Think Netflix's "N", Facebook's "f", or Medium's "M". Set the letter on a colored background that matches your brand if the letter alone does not stand out enough.

3. A simplified abstract shape. Some logos are built around shapes that are not quite standalone symbols. A swoosh, an arc, an angular bracket, overlapping circles. Extract the most distinctive geometric element and clean it up. Remove any detail that does not survive at 32 pixels. This works well when the shape is already simple and geometric.

4. The dominant color as a geometric. When nothing else works, when the logo is too complex, too detailed, or too text-dependent to extract a piece of, you can create a favicon that is simply your brand's primary color in a clean geometric shape. A circle, a rounded square, or a simple polygon in your brand color is better than a blurry shrunk-down logo. Spotify did this for years with just a green circle and three sound waves.

Before and After: Real Logo Simplifications

Seeing how other brands simplify their logos for favicon use is more instructive than any rule list. Here are five patterns that come up repeatedly.

The detailed mascot. A pet supply company has a logo with a hand-drawn dog illustration, complete with fur texture, a collar with a tag, and a friendly expression. For the favicon, the dog was reduced to a simple silhouette: just the head outline with pointed ears. All interior detail was removed. The collar became a single colored band. At 32px, you can tell it is a dog. At 16px, the ear shape is enough to differentiate it from a generic circle.

The multi-word wordmark. A consulting firm's logo is "Henderson & Associates" in elegant serif type. The favicon uses only the "H" in the same serif font, set in the brand's navy blue on a white background. The ampersand, the second word, and the thin serif details were all dropped. What remained was a strong vertical shape that reads clearly even at the smallest size.

The gradient logo. A fintech startup uses a logo with a complex gradient flowing from teal to purple across an abstract wave shape. The favicon version flattened the gradient to a solid teal (the dominant color at the center of the gradient), and the wave was simplified to two clean curves. The brand feel survived because the distinctive color and the wavy motion were preserved, even though the gradient effect was gone.

The badge-style logo. A craft brewery has a circular badge logo with the company name arched around the top, "Est. 2015" at the bottom, a hop illustration in the center, and decorative borders. For the favicon, everything was removed except the hop illustration, which was simplified to a basic leaf shape. The circular border was kept as a thin ring to maintain the badge feel. Text was eliminated entirely.

The abstract letterforms. A design agency has a logo where the letters "DK" are interlocked in a geometric pattern. The favicon kept the interlocking concept but simplified the forms: the "D" became a half-circle and the "K" became two angled lines. At large sizes, you can see they are letters. At 16px, it reads as an abstract geometric mark, which is fine because the visual pattern is what people remember, not the letterforms.

Color Reduction Technique

A logo with five colors does not work at 16 pixels. The colors bleed into each other, boundaries get fuzzy, and the icon becomes an unreadable rainbow blob. Reducing to two colors while keeping the brand feeling intact is a specific skill.

Start by identifying your primary brand color. This is usually the most saturated or distinctive color in your palette, the one a customer would name if asked "what color is that brand?" That color becomes your favicon's dominant fill.

Your second color is for contrast. It is usually white, black, or a very light/dark neutral. Its job is to define the edges of your shape and make the primary color pop. If your brand uses a dark primary color, the second color should be light (white or cream). If your brand uses a light primary color, the second color should be dark.

What about the other colors in your palette? They get dropped entirely for the favicon version. A four-color logo becomes two colors. A gradient becomes a single solid. This feels like a loss, but at 16 pixels, the human eye cannot distinguish more than two or three color zones anyway. Fewer colors means cleaner edges and faster recognition.

The exception is when color variety is the entire brand identity. Google uses four colors in its "G" favicon because the four-color palette is the brand. Slack uses its four colors. But notice that even these multi-color favicons use solid, separated blocks of color with no gradients and clear boundaries between each section.

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.