Favicon Generator

The Favicon Generator takes a logo, a symbol or an image and converts it into the icons that are being used in the browser tabs bookmarks shortcuts and launchers of apps.

Upload your image, tweak the crop padding background and shape of the icon, then preview it at small sizes before grabbing the files you require. You’ve the option to save each icon individually or grab a full set of favicons for your site.

How to Use the Favicon Generator

1. Upload your logo, icon, or image.
2. Adjust the crop so the main symbol is centered.
3. Add or reduce padding until the icon has enough breathing room.
4. Choose a transparent or solid background.
5. Select a square, rounded, or circular mask if needed.
6. Check the smaller previews, especially 16×16 and 32×32.
7. Download individual favicon files or the full package.

The smallest previews are the most important ones to check. A logo can look excellent at 512×512 pixels but become difficult to recognize once it is reduced to browser-tab size.

Start With a Simple, High-Quality Image

Use a square clear image for optimal result.

Using a source image of about 512×512 pixels or larger will provide the generator with enough information to allow the smaller image sizes to be converted smoothly.

SVG is great for logos and other vector graphics as it scales smoothly. A high quality PNG is good if you need transparency.

If your logo is rectangular, don’t distort it into a square shape. Instead, crop around the primary graphic, or give it enough margin to add a balanced square icon.

For most brands the complete logo isn’t the best favicon. Instead a condensed version of the logo, an initial, or something simple and recognizable can be far more effective.

Design for the Smallest Size First

Favicons are tiny—sometimes just 16×16 pixels in a browser tab. At that size, thin lines, taglines, and small lettering can easily get lost.

Keep your design simple. Use one recognizable shape with strong contrast, clean edges, and a little breathing room around it. You don’t need to squeeze in every part of your logo. If it includes both an icon and your company name, the icon alone may work better.

The goal is to make your favicon easy to recognize at a glance, even among a row of open tabs.

Use Padding to Control How Large the Icon Looks

Padding controls how much space sits between your favicon design and the edges of the canvas.

If there isn’t enough padding, the icon can feel cramped or look like it’s touching the edges. Add too much, though, and the design may appear smaller than favicons from other websites.

As you adjust the padding, keep an eye on the 16×16, 32×32, and 48×48 previews. These smaller sizes give you a better idea of how the favicon will actually look in a browser.

Aim for a balance where the symbol feels centered, uses the available space well, and still has enough room around it to stay clear and easy to recognize.

Choose the Right Background

A transparent background works well when your icon has enough contrast to stay visible on both light and dark browser themes.

If your logo uses thin lines, pale colors, or details that might blend into the background, a solid color can make the favicon easier to see.

When adding a background, choose a color that fits your brand and gives the main symbol enough contrast to stand out clearly.

It’s also a good idea to preview the favicon on both light and dark backgrounds. Browsers, operating systems, and themes can display favicons differently, so checking both helps make sure your icon remains clear in different situations.

Square, Rounded, or Circular?

The shape of your favicon can change how the design looks and how much of the original artwork stays visible.

A square gives you the most usable space, so it works well when you want to preserve the full design.

A rounded shape creates a softer, more app-like appearance while still keeping most of the artwork visible.

A circular favicon can look clean and compact, but it may cut off details near the corners.

If you use a rounded or circular shape, keep the most important parts of the logo closer to the center.

It’s also worth checking each shape separately. A logo that looks good as a square may not fit as well inside a circle.

What Files Does a Favicon Package Include?

Different browsers and devices may request different icon sizes or formats, which is why a complete favicon package usually contains several files.

You do not necessarily need to use every generated file, but providing several suitable sizes gives browsers and devices more options.

How to Add a Favicon to Your Website

You can add a basic favicon by placing this line inside the <head> section of your website:

<link rel="icon" href="/favicon.ico">

If you use PNG favicons in different sizes, you can define each one separately. For example:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Make sure the file path in your HTML matches the actual location of the favicon on your website. If the path is incorrect, the browser may not be able to load the icon.

If your site also uses a web app manifest, check that the icon paths listed there point to the correct files as well.

For more technical details, MDN explains how the HTML rel="icon" relationship works and how browsers use favicon resources.

Test the Favicon After Uploading It

Don’t rely on the generator preview alone. Once your favicon is installed, open your website in a few different browsers and check how it actually looks in the browser tab.

It’s also worth testing it in a few other places:

• bookmark the page and check how the saved icon appears;
• switch between light and dark browser themes;
• view the site on a high-density display;
• add the site to a mobile home screen if you provide app icons; and
• compare your favicon with the icons in nearby tabs.

A design can look perfectly centered at 512×512 but feel slightly off once it is reduced to 16×16. For that reason, the smallest real-world version should be the final test.

Quick troubleshooting tip: If you update the favicon but still see the old version, try a hard refresh or clear the browser cache. Favicons are often cached more aggressively than other website assets.

Why Is My New Favicon Not Showing?

Favicons can stay cached in a browser longer than you might expect. If you replace your favicon but the old one is still showing, start by checking that the new file was uploaded to the correct location.

If the file is in the right place, try a few simple fixes:

• open the website in a private or incognito window;
• clear your browser cache;
• clear your WordPress cache, if you use a caching plugin;
• purge your CDN cache;
• open the favicon URL directly to check which version is loading; or
• temporarily use a different filename or versioned URL while testing.

For example, you could change:

favicon.png

to:

favicon-v2.png

If the new icon appears after changing the filename, caching was probably the cause.

Once the favicon is working correctly, switch back to stable production filenames that match the way you normally manage and deploy website assets.

Quick favicon checklist

Before you finish, check that:

• the icon is easy to recognize at 16×16 pixels;
• important details are not cropped or too close to the edges;
• the favicon looks clear on both light and dark backgrounds;
• your HTML points to the correct favicon file;
• the favicon loads correctly in more than one browser;
• any app icons or manifest files use the correct paths; and
• old cached versions have been cleared if you recently updated the icon.

If all of these look good, your favicon should be ready to use.

Common Favicon Problems

The Favicon Looks Blurry

The source image may be too small, or the design may contain more detail than a tiny favicon can preserve.

Start with a larger source image and simplify the artwork where possible.

The Icon Is Cropped

The artwork is probably too close to the edge or the selected mask is cutting into it.

Add more padding or reduce the size of the artwork within the canvas.

The Icon Looks Too Small

There may be too much padding around the design.

Reduce the padding while watching the smallest previews.

The Icon Disappears on Dark Tabs

Some parts of the logo may not have enough contrast.

Try a different background, stronger edge contrast, or a simplified version of the mark.

The Old Icon Still Appears

This is usually a caching issue.

Check the browser, website cache, WordPress cache, and CDN before assuming the favicon files are incorrect.

The Favicon Works on Desktop but Not on Mobile

The mobile device may be looking for a different icon size, manifest entry, or home-screen icon.

Check that the required larger icon files are included and that your website references them correctly.

Keep Your Favicon Files Easy to Maintain

Save the original SVG or high-resolution source image alongside the generated favicon package.

It is also useful to keep a note of the padding, background color, and mask settings you used.

If your branding changes later, regenerate the favicon files from the original source rather than manually editing each tiny PNG.

This keeps the different sizes consistent and avoids subtle differences in color, positioning, or edge quality.

Prepare Your Image Before Generating the Favicon

If your source image is not already square, use the Image Cropper to prepare the artwork before generating the favicon.

You can also use the Image Color Picker if you need to match the favicon background to a color from your existing logo or website.

FAQ

Build the Favicon for the Size People Actually See

A favicon may be one of the smallest parts of your website’s branding, but visitors see it in places they use all the time, including browser tabs, bookmarks, shortcuts, and sometimes app launchers.

Start with a clean version of your logo or icon, then simplify it if needed. Pay close attention to how it looks at the smallest sizes. A favicon that is easy to recognize at 16×16 pixels will usually work better than one that tries to keep every detail from the original design.

Once you’re happy with the result, download the files you need and add them to your website. Then test the favicon in a few different browsers and on the devices your visitors are most likely to use.

When everything looks clear, balanced, and recognizable at a glance, your favicon is ready to go.