How to Make a Favicon: Sizes, Formats, and HTML Explained

The small icon at the left edge of a browser tab, in your bookmarks list, and on a smartphone home screen is the favicon. Though it is just a tiny image of a dozen or so pixels, it acts as the "face" of your site, shaping first impressions and trust, and serving as a marker that helps people spot your site among many open tabs. This guide walks through the role of the favicon, the sizes and formats to prepare, how to write the correct HTML, settings for Apple devices, and the actual creation steps. You can complete the whole process in a browser, with no advanced image editor required.

The role of the favicon and where it appears

"Favicon" is short for "favorite icon," and it was originally created to identify bookmarks. Today it is used in many places as a small logo that symbolizes your site.

• Browser tabs: shown to the left of the title, letting you tell tabs apart instantly even with many open.
• Bookmarks and favorites: improves visibility within the saved list.
• History and address bar suggestions: the icon accompanies suggestions as you type.
• Smartphone home screen: when you add a site to the home screen, it lines up like an app with a larger icon.
• Links on social and chat: in some environments it is referenced as a small icon when a link is shared.

Without a favicon, the browser shows a default icon like a globe or a blank page, which can suggest an amateur or unmaintained site. Conversely, a clear favicon using your logo or initials instantly raises the overall polish of the site.

Sizes and formats to prepare

You can get by with a single image, but because each display location has its own ideal size, the current standard is to prepare several sizes. Here are the common sizes and their uses.

For formats, choose based on the purpose.

• ICO (.ico): a traditional favicon-specific format that can hold multiple sizes such as 16×16 and 32×32 in one file. It is broadly supported, including older environments. Place it at the site root as favicon.ico and browsers will look for it automatically, even without HTML.
• PNG (.png): supports transparency and stays crisp at high resolution. Sizes like 32×32, 180×180, and 192×192 are commonly prepared as PNG.
• SVG (.svg): a vector format that stays sharp at any scale. Major modern browsers support it and it can even adapt to dark mode, but on its own you should also provide another format for unsupported environments.

At tiny sizes like 16×16 or 32×32, detailed logos and text tend to blur into illegibility. Favicons suit boldly simplified designs such as "just the symbol mark" or "just one or two initials." Keep the background solid or transparent and avoid cramming in too many elements.

How to write the HTML

Your image files are recognized by the browser only once you reference them with a <link> tag inside the HTML <head>. Here are the essentials.

• Standard favicon: use rel="icon", with href for the image path, type for the format, and sizes for the size. For PNG, write type="image/png".
• Automatic ICO loading: placing favicon.ico at the site root lets many browsers load it without a <link> tag, but for certainty it is safer to declare it explicitly with rel="icon".
• For Apple devices: specify a 180×180 PNG with rel="apple-touch-icon" to set the icon used when added to the iPhone home screen.
• For Android and PWA: 192×192 and 512×512 icons are typically referenced inside a manifest file.

As for order, grouping these near the top of the <head> lets the browser recognize the icon early in page loading. Writing paths as absolute paths from the site root (paths starting with "/") ensures the same icon loads correctly from pages at any directory level.

Setting the apple-touch-icon

The apple-touch-icon is used when you "Add to Home Screen" on an iPhone or iPad. Without it, Safari falls back to a downsized screenshot of the page, which looks poor. The basics are to prepare a dedicated 180×180 pixel PNG and specify it with rel="apple-touch-icon".

Keep these points in mind for the apple-touch-icon.

• Rounded corners are added automatically: iOS rounds the corners and adds finishing as needed. Provide the source image with square, un-rounded corners.
• Avoid transparency: a transparent background can let an unintended color such as black show through on the home screen. A solid background is more stable.
• Leave a little margin: if artwork reaches the very edge, the corner rounding may clip parts of the logo. Keeping it slightly inset is safer.

You can specify multiple apple-touch-icon sizes in detail, but in recent years a single 180×180 displays cleanly on most devices.

Steps to create a favicon

With the above in mind, here is the actual flow for making a favicon. No dedicated software is needed; a source image and a browser are enough.

1. Prepare a source image: get a logo, symbol mark, or initials as large and square as possible (for example, 512×512 or larger). Keep the background solid or transparent and the elements simple.
2. Make it square: if the source is rectangular, crop just the part you need into a square, or add margin to make it square. This prevents distortion when scaled down.
3. Convert and generate each size: from the square image, export sizes like 16, 32, 180, 192, and 512, and formats such as favicon.ico, PNG, and SVG. Load your image into the favicon generator to produce the needed sizes and formats together, along with example <link> tags to paste into your HTML. The image is processed in your browser, so there is no need to upload it anywhere.
4. Convert the format if needed: if your image is in an awkward format such as HEIC or WebP, convert it to PNG first with the image converter for more stable results.
5. Place the files: put the exported favicons on your site. favicon.ico is conventionally placed at the root (top level).
6. Write the <link> in HTML: paste the tags output by the generator into your <head> and adjust the paths to match where you placed the files.
7. Check the display: open your site in a browser and confirm the icon appears in the tab. Old icons can linger in the cache, so if nothing changes, try a hard reload or clearing the cache.

The favicon is a small element, but whether it is set makes a big difference to a site's impression. Master these three steps — create a simple square source image, export the needed sizes and formats, and declare them correctly with <link> in the <head> — and you will have a favicon that displays cleanly on both desktop and mobile. This article is general information; browser and OS specifications can change. Check the official information for each browser and OS for the latest, accurate details.