If you've ever uploaded your beautiful, expensive company logo to your website only to see a blurry, illegible smudge in the Safari tab bar — you are not alone. Browsers are ruthless when shrinking images down to 16x16 pixels. You cannot just resize a massive PNG and hope the browser figures it out.

Look at GitHub. Their main logo includes the wordmark 'GitHub' next to the Octocat. But their favicon? Just the Octocat silhouette. They know that text becomes microscopic garbage at 16 pixels. You need to simplify.

I strongly recommend skipping desktop image editors for this specific task. Exporting multi-resolution ICO files from Photoshop requires obscure plugins and usually results in bloated file sizes. Instead, let us walk through how to create favicon online step by step using Mzu favicondl.

Prerequisites: Preparing Your Source Image

Before you even open a browser, you need the right source file. If you feed garbage into a generator, you will get garbage out. Here is what you need:

How to Create Favicon Online Step by Step

We built Mzu favicondl specifically to handle the annoying parts of icon generation. Here is the exact workflow I use for every new project.

Step 1: Upload and Crop

Drag your prepared SVG or PNG into the Mzu favicondl dropzone. The tool immediately parses the image. If your image is not perfectly square, the UI provides a cropping tool. Always center your icon, but do not let it touch the absolute edges of the canvas.

Step 2: Adjust the Padding

This is the step most developers skip. iOS and Android will often mask your icon with rounded corners or circles. If your logo stretches to the very edge of the image, the OS will chop off the corners. Add about 10% to 15% transparent padding around your central graphic.

Step 3: Configure Dark Mode

If your logo is solid black, it will completely disappear on a dark browser tab. Mzu favicondl allows you to specify a background color or generate an inverted SVG specifically for dark themes. I usually opt for a transparent background with a white stroke around dark logos.

Step 4: Generate and Download

Hit the generate button. Instead of giving you 30 useless legacy sizes, the tool packages the exact modern stack you need: a scalable SVG, a 180x180 Apple Touch Icon, a web manifest for Android, and a multi-size ICO file for legacy browsers.

Implementing the Generated Code

Downloading the files is only half the battle. Now you need to wire them up in your HTML. Extract the downloaded ZIP file and move the contents into the root directory of your web server (usually the public or dist folder).

The Required HTML Snippet

Open your index.html (or your framework's base template) and paste the following code inside the <head> tag:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>

Notice that we are not using the ancient rel='shortcut icon' attribute. That is a relic from Internet Explorer 5 and is completely ignored by modern browsers. Stick to standard icon.

Common Pitfalls to Avoid

The Caching Nightmare

You uploaded the new files, refreshed the page, and the old icon is still there. Do not panic. Browsers cache favicons aggressively to save bandwidth. You can read our full guide on forcing a favicon cache clear, but the quickest fix during development is to append a query string to your HTML links, like href='/favicon.svg?v=2'.

Using a Full Logo

I see this constantly on junior developer portfolios. They try to cram their entire first and last name into a 16x16 pixel square. It looks like a barcode. If you need more advice on simplifying your graphics, check out our guide on making a favicon from an image.

Stop treating your browser tab presence as an afterthought. A crisp, well-padded icon builds immediate trust with your users. Grab your logo, strip out the text, and run it through the generator. It takes less than five minutes.