How do I create a favicon from an image for free?

Open Alvseike's Favicon Generator, drag your square source image onto the drop zone, and export the set. It produces the .ico file, the PNG sizes browsers and phones ask for, and the web manifest. It is free with no account, and the image is processed on your device rather than uploaded.

What size image should I use to make a favicon?

Use a square image at least 512×512 pixels, ideally an SVG or a large PNG. A big source lets the generator produce the 512×512 Android icon without upscaling, and a square source avoids awkward cropping. Smaller sources still work but produce softer large icons.

Can I make a favicon with a transparent background?

Yes. If your source PNG or SVG has a transparent background, the transparency carries through to every generated size. Transparent favicons look correct on both light and dark browser themes, while a white background behind your mark tends to look like a mistake on dark tabs.

Do I need more than a favicon.ico file?

Yes. The .ico covers browser tabs and older readers, but iOS home screen shortcuts need a 180×180 apple-touch-icon.png, and Android install prompts need 192×192 and 512×512 PNGs listed in a web manifest. A complete set covers all of them from one source image.

Why is my new favicon not showing up?

Browser cache is almost always the cause. Browsers store favicons aggressively and may keep an old one for days. Open your site in a private window or clear the cache, then hard-refresh. If it still fails, confirm the files sit in your site root and the link tags point to the right paths.

How to Create a Favicon From an Image (Free)

To create a favicon from an image, open the Favicon Generator, drag your source image onto the drop zone labelled 'Drag & drop or browse', and export the full icon set. The whole conversion runs inside your browser, so the image is never sent to a server and you get your favicon files back in seconds.

This guide covers what a complete favicon set actually needs in 2026, how to run the conversion step by step, and the mistakes that make icons look blurry in browser tabs, bookmarks and home screens.

What a modern favicon set includes

A single .ico file is no longer enough. Browsers, phones and app launchers each ask for a different size and format, so a proper set covers all of them:

File	Size	Used by
favicon.ico	16×16, 32×32, 48×48	Legacy browsers, RSS readers, some feed tools
favicon-16x16.png	16×16	Browser tab
favicon-32x32.png	32×32	Browser tab on retina screens, bookmarks bar
apple-touch-icon.png	180×180	iOS home screen shortcut
android-chrome-192x192.png	192×192	Android home screen, PWA splash
android-chrome-512x512.png	512×512	Android splash screen, install prompt
site.webmanifest	—	Tells Android which icons to use

Generating these by hand means resizing the same artwork seven or eight times and renaming each export correctly. The Favicon Generator does the resizing, the .ico packing and the manifest in one pass from a single source image.

How to create a favicon from an image step by step

Pick the right source image. Use a square PNG or SVG, ideally 512×512 or larger. A square source avoids cropping surprises, and a larger source gives the generator more pixels to work with when it produces the 512×512 Android icon.
Open the Favicon Generator. You will see a drop zone labelled 'Drag & drop or browse' under the line 'Processed locally — your files never leave your device'. There is no upload step, because nothing is uploaded.
Add your file. Drag your image onto the drop zone, or click it to browse your own machine. The generator takes one file at a time, so pick your single best source image rather than a folder of candidates.
Check the transparency. If your source has a transparent background, keep it. A transparent favicon generator output sits cleanly on light and dark browser themes, while a white box behind your mark looks like a mistake on dark tabs.
Generate the set. The tool resizes your artwork to every size in the table above and packs the multi-resolution .ico. Everything happens in the page, on your device.
Export and unzip. You get the PNG files, the .ico and the site.webmanifest together. A run is one export, however many files it contains.
Add the files to your site root. Drop them next to index.html — most browsers look for /favicon.ico automatically, and the manifest handles the Android icons.
Link them in your HTML head. Add the standard tags so every browser and platform finds the right file:

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

Hard-refresh and check. Browsers cache favicons aggressively. Open your site in a private window, or clear the cache, before deciding the icon is broken.

Why local, in-browser processing beats upload-based favicon tools

Most free favicon generators work the same way: you upload your logo, a server resizes it, and you download a zip. That model has three costs.

Privacy. Your source image is often a logo, a client mark or unreleased branding. Uploading it hands a copy to a third party you have no contract with. With the Favicon Generator the file is opened from your own machine and the resizing happens in the page — your artwork never leaves your device, so there is nothing to delete afterwards and nothing to leak.

Speed. A server round trip means waiting for the upload, waiting in a queue, then waiting for the download. Local processing skips all of it. On a normal laptop the conversion finishes faster than most uploads even start.

No file-size caps. Upload tools cap you because storage and bandwidth cost them money. Local processing has no file-size caps, so a 4000px master logo is fine as a source. That matters because a large source is exactly what you want when generating the 512×512 Android icon.

There is a fourth, quieter benefit: no watermark. Some free generators stamp a badge on the output or hold the transparent version behind a sign-up. The Favicon Generator adds nothing to your files.

Alvseike's tools are free with no account, metered at 5 runs per day; a free account raises that to 15 a day, and a Pro plan unlocks unlimited daily use. If you are generating favicons for several client sites in one sitting, see pricing for the unlimited option.

Common mistakes when you create a favicon from an image

Using a wide logo instead of a square. A horizontal wordmark squeezed into a 32×32 square becomes an unreadable smear. Crop to the symbol or monogram first. If you need the full wordmark somewhere, use it in a header image, not a favicon.

Too much detail. At 16×16 there are 256 pixels total. Thin strokes, gradients and small text all disappear. Test your icon at actual tab size before you commit — if you cannot tell what it is at 16px, simplify it.

Low-contrast colours on browser chrome. Tabs are light in some themes and dark in others. A pale yellow mark vanishes on a white tab; a near-black mark vanishes on a dark one. Pick a colour that holds up against both, or keep a transparent background and a solid, saturated fill.

Forgetting the apple-touch-icon. iOS ignores favicon.ico when a user adds your site to the home screen. Without a 180×180 apple-touch-icon.png, iOS screenshots your page and shrinks it, which looks sloppy.

Skipping the manifest. Without site.webmanifest, Android falls back to a low-resolution guess for the install prompt and splash screen. The generator writes the manifest for you — just link it.

Not clearing the cache. Nine times out of ten, 'my favicon did not update' is browser cache, not a broken file. Check in a private window before you regenerate anything.

Pro tips for sharper favicons

Start from SVG when you can. Vector sources scale cleanly to 512×512 without soft edges. The generator accepts raster images too, but vector in means crisp out.
Design the 16×16 first. If your mark reads at 16 pixels, every larger size will read too. The reverse is not true.
Keep one master file. Save your 512×512 source alongside the generated set. When your brand changes, you regenerate from the master instead of hunting for a usable export.
Check the bookmark bar. The 32×32 icon is what most people see most often, in the bookmarks bar and on retina tabs. Judge your icon there, not in a design tool at 400% zoom.
Mind the padding. Leave a small margin inside the square so the mark does not touch the tab edge. Icons that fill the full canvas look cramped next to other tabs.

Where favicons fit in the rest of your asset set

A favicon is one output from one source image, and the same source usually needs to become several other things. If you are preparing a product launch, the Mockup Generator drops a screenshot into a phone, browser or laptop frame so you can show the interface in context. When the launch needs banners and post images, the Social Pack Exporter exports one design to every social size in a single pack. And if you publish audio, the Podcast Artwork Pack turns one square of cover art into every size Apple, Spotify and your host ask for.

All three work the same way as the Favicon Generator: the file is opened from your device, processed in the page, and never uploaded.

The short version of everything above: square source, 512×512 or larger, transparent background where possible, and let the generator produce the full set rather than hand-resizing one file. Link the files in your head, clear your cache, and check the result at real tab size. That is the whole job, and it takes about a minute.