How to Create a Favicon: Free 5-Minute Guide (2026)

How to Create a Favicon: Free 5-Minute Guide (2026)

by

What is a favicon? It is the small icon you see in your browser tab, in your bookmarks bar, and in your phone’s home screen shortcuts — the tiny visual signature of a website. That 16-pixel square does more work than its size suggests: it helps users find your tab among twenty open ones, makes your bookmark recognizable, and quietly signals that a site is finished and professional. Sites without one show a generic blank page icon, which reads as “under construction” even when the site is complete. Learning how to create a favicon takes about five minutes, and this guide shows the whole workflow.

The good news is that making one costs nothing. This guide answers what is a favicon in full — the formats, the sizes, and the exact steps to create one and add it to your site. The fastest path is our free Favicon Generator: upload any image, and it builds a proper multi-size favicon with no signup, entirely in your browser.

Table of Contents

Before diving into how to create a favicon, the precise definition behind what is a favicon.

What Is a Favicon, Exactly?

A favicon (short for “favorite icon”) is a small image file a website provides so browsers can display its icon in tabs, bookmarks, history lists, and mobile home-screen shortcuts. The concept dates back to Internet Explorer 5 in 1999, which looked for a file named favicon.ico in a site’s root directory. The idea stuck, and every modern browser now requests a site icon — see Wikipedia’s favicon article for the full history.

Where your favicon appears: the browser tab (16×16 pixels, the classic spot), the bookmarks bar, browser history, mobile “add to home screen” shortcuts, and search results on some engines. Each context renders it at a different size, which is why the multi-size approach in the next sections matters. A favicon is not your logo shrunk down — at 16 pixels, fine detail vanishes, so the best favicons are simplified marks: a single letter, a bold shape, or a high-contrast symbol.

Formats are the technical half of what is a favicon — and your first choice in how to create a favicon.

ICO vs PNG vs SVG: Which Format to Use

Three formats compete for the favicon job, and the honest answer is that the safest setup uses more than one:

  • ICO — the legacy safe choice. An ICO file is a container holding multiple sizes of the same icon (typically 16×16, 32×32, and 48×48). Browsers have supported it since the beginning, and some older software still expects favicon.ico specifically. Our PNG to ICO converter builds proper multi-size ICO files — most single-size converters skip this, which is why their favicons look blurry in some contexts. See our guide on how to convert PNG to ICO for the details.
  • PNG — the modern practical choice. PNG favicons support transparency and are easy to generate at any size. Every modern browser accepts them. A 32×32 or 180×180 PNG covers tabs and Apple touch icons respectively.
  • SVG — the future, with a catch. SVG favicons scale infinitely and stay crisp at every size, and they can even adapt to dark mode. The catch: Safari and some older browsers do not support SVG favicons, so SVG can only be a progressive enhancement, never the only format.

The recommended setup: serve an ICO as the fallback (maximum compatibility), a PNG for modern browsers, and optionally an SVG for crispness where supported. Declared in that order, every browser picks the best format it understands.

Sizes are where most people learning how to create a favicon go wrong.

Favicon Sizes: What You Actually Need

Favicon size advice online is a mess of outdated lists. Here is what actually matters in current browsers:

  • 16×16 — the browser tab icon. The one size you cannot skip.
  • 32×32 — taskbar and high-density tab rendering. Include it in your ICO.
  • 48×48 — Windows site icons and some browser UI spots. Include it in your ICO.
  • 180×180 — Apple touch icon (iPhone/iPad home screen). A PNG at this size, referenced separately.
  • 192×192 and 512×512 — Android/Chrome install prompts and progressive web apps.

You do not need to hand-craft each size. A good generator builds them all from one source image — start from a 512×512 or larger source so the downscales stay clean, the same one-pass-downsize principle from our image resizing guide.

Making one is the practical payoff — this is how to create a favicon step by step.

How to Create a Favicon in 5 Minutes

Here is the full workflow for how to create a favicon from any image:

  1. Pick or simplify your mark. If your logo has fine text or thin lines, simplify it: a single bold letter on a solid background beats a detailed logo at 16 pixels. Test legibility by zooming out — view your candidate at 16×16 actual size and check it is still recognizable.
  2. Start square and high-resolution. Use a square source image at least 512×512. If your logo is not square, place it centered on a square background rather than stretching it.
  3. Generate the multi-size files. Upload the source to our Favicon Generator — it produces the ICO (16/32/48), the PNG sizes, and the HTML snippet to add, all in one pass. No signup, and everything happens in your browser.
  4. Check transparency. If your mark has a transparent background, verify the edges against both light and dark browser themes — a dark icon on a dark tab bar disappears. When in doubt, put the mark on a solid brand-colored square.
  5. Preview at real size. Before deploying, view the 16×16 output at 100% zoom. This is the size users will actually see, and it is where most DIY favicons fail.

Installation completes the how to create a favicon story — one last step after the files are built.

How to Add a Favicon to Your Website

Adding it is a few lines of HTML in your page’s <head> section:

  • Place favicon.ico in your site’s root directory — browsers check there automatically even without any HTML.
  • Add explicit declarations for the formats you generated, so each browser picks its best option: the ICO fallback, the PNG sizes, and the Apple touch icon.
  • WordPress users: you do not need code at all — go to Customizer → Site Identity → Site Icon, upload a square image (512×512 or larger), and WordPress generates the sizes for you.
  • The cache trap: browsers cache favicons aggressively. If you update yours and do not see the change, hard-refresh (Ctrl/Cmd + Shift + R) or add a version query string to the file reference. This catches nearly everyone at least once.

These mistakes come from rushing how to create a favicon without the sizing basics.

5 Favicon Mistakes to Avoid

  • Using the full logo. A detailed logo at 16 pixels becomes visual noise. Simplify to one mark.
  • Single-size ICO files. A 16×16-only ICO looks blurry wherever the browser wants 32×32. Always ship multi-size.
  • Forgetting the Apple touch icon. Without a 180×180 PNG, iPhones show a tiny screenshot of your page as the home-screen icon — ugly and unprofessional.
  • Low-contrast marks. Thin gray lines on white vanish in tabs. Favicons need bold shapes and strong contrast.
  • Never checking dark mode. Test your favicon against dark browser themes; a dark mark on a dark tab is invisible.

Try It: Generate a Favicon

Now you know what is a favicon and exactly how to create a favicon — the doing takes five minutes. Upload any square image to our Favicon Generator and get a complete multi-size favicon package: ICO with 16/32/48-pixel versions, PNGs for modern browsers and Apple touch icons, and the HTML snippet to paste into your site. Free, no signup, processed entirely in your browser. If you already have a PNG and just need the ICO container, our PNG to ICO Converter builds proper multi-size ICOs. Need to prep your source image first? Resize it to a clean 512×512 square.

Frequently Asked Questions

What is a favicon used for?

A favicon is the small icon browsers show for your website in tabs, bookmarks, history, and mobile home-screen shortcuts. It helps users identify and find your site quickly, and its absence makes a site look unfinished.

What size should a favicon be?

Ship multiple sizes: 16×16 for browser tabs, 32×32 and 48×48 in your ICO file, 180×180 PNG for Apple touch icons, and 192×192/512×512 for Android. Generate them all from a single 512×512 (or larger) square source image.

What is the difference between a favicon and a logo?

A logo is your full brand mark designed at any size; a favicon is a tiny simplified version optimized for 16-pixel display. Detailed logos fail as favicons — the best favicons use a single letter, bold shape, or high-contrast symbol derived from the logo.

Why is my favicon not showing up?

The usual cause is aggressive browser caching — hard-refresh or add a version query string to force a re-fetch. Other causes: the file path in your HTML is wrong, the image is not actually square, or you are testing on a page cached by a CDN.

Can I use an SVG as a favicon?

Yes in most modern browsers, and SVG favicons stay crisp at every size. But Safari and some older browsers do not support them, so always ship an ICO fallback alongside — SVG should enhance your favicon setup, not be the whole setup.