Image to Favicon: Create Website Icons From Any Image

Q: How do I reference favicons in HTML?

With tags pointing to each size and format, plus for iOS. The browser picks the best match. A complete set of link tags covers every platform.

Last updated: June 28, 2026. Browser favicon support evolves; the core sizes and formats here cover the current landscape.

A favicon is the small icon that appears in a browser tab, a bookmark list, and a phone home screen when someone saves your site. Converting an image into a favicon means creating the right file types at the right sizes so the icon looks sharp everywhere it appears — from a 16-pixel browser tab to a 180-pixel Apple Touch icon. This guide covers the sizes each platform expects, the file formats to generate, and how to keep the icon recognizable at tiny sizes.

Quick answer: how do you create a favicon from an image?

Use our Favicon Generator tool: start with a square source image (or crop to square with the image cropper) and it packages the standard favicon sizes (16-256px) into one .ico file automatically. Reference them in your HTML <head> with the appropriate link tags. Test the 16px version in a browser tab, because if the icon is not recognizable at that size, no amount of larger versions will fix it. Keep the SVG version too if the logo is vector, for crisp rendering on high-DPI screens.

What sizes does a favicon need?

Different contexts display the favicon at different sizes, and providing the right sizes keeps it sharp everywhere.

Size	File	Used for
16x16	ICO / PNG	Browser tab (legacy)
32x32	ICO / PNG	Browser tab (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Android home screen
512x512	PNG	PWA / splash
Any	SVG	Modern browsers, high-DPI

The 16px version is the most important — it is what most people see in a tab.
The Apple Touch icon needs 180px for crisp home-screen display on iOS.
SVG serves modern browsers at any resolution without multiple files.
One ICO can bundle multiple sizes for legacy support.

How do you design a favicon that works at 16px?

The challenge of a favicon is that it must be recognizable at 16 pixels, which is tiny. Detail that looks good at 512px disappears at 16px, so the design must be simple.

Use a single, bold shape — a letter, a logo mark, a simple icon.
Avoid thin lines and small text — they vanish at 16px.
Use high contrast so the shape reads against the tab background.
Test the 16px version at actual size before shipping.

A common mistake is using the full logo with text. At 16px, the text is illegible, so the favicon looks like a blurry smudge. The fix is to extract the single most recognizable element — the icon or the first letter — and use that as the favicon. The SVG to PNG guide covers exporting vector marks at the sizes you need.

What file formats should you generate?

Favicons span several formats because browser support evolved over time, and covering them all ensures the icon works everywhere.

ICO — the legacy format, bundles multiple sizes, supported by all browsers.
PNG — the modern standard, one file per size.
SVG — vector, scales to any size, supported by modern browsers.
Apple Touch PNG — specifically 180x180, for iOS home-screen icons.

Format	When to use
ICO	Legacy browser support, bundles sizes
PNG	Modern browsers, per-size files
SVG	Modern browsers, single scalable file
Apple Touch PNG	iOS home screen

Generate an ICO for legacy compatibility, PNGs at each size for broad support, and an SVG if the source is vector. Our Favicon Generator tool handles the format generation, and the image cropper gets the source square first.

How do you reference favicons in HTML?

The generated files must be referenced in the page <head> so browsers find them. The link tags tell the browser which file to use for which context.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The ICO covers legacy browsers with bundled sizes.
The SVG serves modern browsers at any resolution.
The Apple Touch icon covers iOS home-screen saves.
Place the files at the site root for maximum compatibility.

The Mozilla favicon guide documents the link tags and browser behavior, and the Web.dev app icons guide covers the maskable icon standard for Android. Test the result in a real browser tab and on a phone home screen after deploying, because rendering quirks only show up in the actual contexts.

Designing favicons for light and dark mode

Modern browsers and OSes switch between light and dark mode, and a favicon that looks great on a light tab can disappear on a dark tab. A transparent-background PNG or an SVG with adaptive colors handles both contexts, because the icon adapts to the surrounding chrome rather than carrying its own background.

Mode challenge	Solution
Dark icon vanishes on dark tab	Add a subtle outline or use transparency
Light icon vanishes on light tab	Same — outline or adaptive color
Hard readability at 16px	Simplify shape, increase contrast

For SVG favicons, you can use the prefers-color-scheme media query inside the SVG to serve different colors for light and dark contexts, which is the cleanest solution. For PNG, a transparent background with a shape that has enough internal contrast works acceptably on both. The goal is that the favicon reads in a tab regardless of whether the user runs light or dark mode, which is increasingly the default rather than the exception.

Common favicon mistakes

Too much detail — the icon is unrecognizable at 16px. Simplify.
Non-square source — crop to square first or the icon distorts.
Missing the Apple Touch icon — iOS saves show a generic screenshot instead.
No SVG — high-DPI screens render a blurry PNG instead of a crisp vector.
Forgetting to test at 16px — the size most people see is the one most often neglected.

The favicon is small but it appears everywhere your site is represented — tabs, bookmarks, home screens, search results. A crisp, recognizable icon at every size reinforces the brand at a glance, while a blurry or missing favicon signals a lack of polish. Spend the time to get the 16px version right, generate the full size and format set, and the icon will represent the site cleanly wherever it appears. The investment is small — a single afternoon of design and export work — but it pays off every time a user sees your site in a tab, a bookmark, or a home screen, which is far more often than most teams realize.

Frequently asked questions

What sizes does a favicon need?

A modern set: 16×16, 32×32, 48×48 (classic), plus 180×180 (Apple touch icon) and 192×192 / 512×512 (Android). One master image generates the whole set. The browser picks the right size per context.

How do I design a favicon that works at 16px?

Keep it simple — one bold shape, high contrast, no fine detail or text. At 16px anything intricate becomes a smudge. Test the design at 16px before committing; if it does not read there, it is too complex.

What file formats should a favicon use?

ICO for legacy compatibility, PNG for modern browsers and Apple/Android icons, and SVG for a resolution-independent version where supported. Generate the full set; one format does not cover every device.

How do I reference favicons in HTML?

With <link rel="icon"> tags pointing to each size and format, plus <link rel="apple-touch-icon"> for iOS. The browser picks the best match. A complete set of link tags covers every platform.

Can I use one image for every favicon size?

Yes — a single square master (512×512 or larger) generates the whole set, from 16×16 to 512×512. Design the master to read at 16px (one bold shape) so the smallest size still works. One master, many sizes.

How do I test a favicon?

Open the site in a browser tab and check the icon at 16px (tab size), 32px (bookmarks), and 180px (Apple touch). If the 16px version does not read, the design is too complex — simplify to one bold shape. Favicons are small but appear everywhere, so a crisp, recognizable icon at every size reinforces the brand at a glance.

What is an ICO file?

A legacy container format that holds one or more raster images at different sizes, used for favicons on older browsers (notably old Internet Explorer). Modern browsers use PNG and SVG, so ICO is mainly a backward-compatibility layer. Generate an ICO alongside your PNG/SVG set so every browser, however old, gets an icon.

Image to Favicon: Create Website Icons From Any Image

Quick answer: how do you create a favicon from an image?

What sizes does a favicon need?

How do you design a favicon that works at 16px?

What file formats should you generate?

How do you reference favicons in HTML?

Designing favicons for light and dark mode

Common favicon mistakes