How to Create and Design Your Own Favicon

The short answer

A favicon is the small icon a browser shows in tabs, bookmarks, history lists and, on some devices, home-screen shortcuts. To create one, start from your vector logo, reduce it to its most recognizable element, redraw that element so its edges land cleanly on the pixel grid at the smallest sizes, then export a set of raster and vector files and declare them in your site's HTML. The step that most often separates a crisp favicon from a blurry one is pixel grid refinement: a full logo scaled down mechanically rarely survives at tab size, so the small version usually needs to be adjusted by hand.

Two kinds of files are involved. Your logo master should be true vector artwork, made of editable paths. The favicons a browser displays at small sizes are mostly raster images, such as PNG files or an ICO container holding several PNG or bitmap sizes. An SVG favicon can also be supplied, but it is rendered to pixels on screen, so grid alignment still matters.

Check what you are starting from

Before designing, confirm that the source logo is genuinely vector. A file extension such as SVG, AI, EPS or PDF does not prove it: any of these can contain an embedded raster image or a flattened preview instead of editable paths. Open the file in a vector editor and use outline or wireframe view. If you see clean path outlines, you have vector artwork. If you see a single rectangle or a bounding box around a picture, the logo is an embedded raster image and will need to be redrawn or traced before it can be refined properly.

Also check the rights. Having a downloadable logo file does not automatically mean you may alter the artwork, reuse its typeface or apply the mark to a site. If the favicon is for your own brand, this is straightforward; if you are working for a client or using a third-party mark, confirm that modification is permitted and that any font in the logo is licensed for the use you intend.

Choose what goes into the icon

Most full logos are too detailed for a favicon. Wordmarks, taglines, fine outlines, gradients and small secondary shapes tend to become an indistinct smudge at tab size. Common, workable choices are a standalone symbol from the logo, a single initial or monogram, or a simplified version of the symbol with interior detail removed. The goal is a shape that stays recognizable as a silhouette.

• Keep one dominant shape rather than several small ones.
• Remove thin strokes, hairlines and small gaps that will close up when reduced.
• Limit the palette to the brand's strongest one or two colors, with enough contrast between them.
• If you use a letter, convert it to outlines so the icon does not depend on a font being available, and keep an editable copy separately.
• Decide whether the icon sits on a solid background shape or on transparency; a transparent icon must remain legible on both light and dark browser themes.

Refine the artwork on the pixel grid

Pixel grid refinement means adjusting the vector shapes so their edges coincide with whole pixels at the target output size. When a vertical or horizontal edge falls halfway across a pixel, the renderer averages it into a band of semi-transparent pixels, which reads as blur. Aligning edges to the grid keeps them sharp.

• Set up an artboard at the exact pixel size you are designing for, such as 16 by 16 or 32 by 32, and turn on the pixel grid and pixel snapping in your editor.
• Place straight horizontal and vertical edges on whole-pixel boundaries.
• Make stroke and gap widths whole numbers of pixels at that size; avoid anything thinner than one pixel.
• Where a stroke has an odd pixel width, check that it is centered so it does not straddle a pixel line.
• Simplify curves and diagonals where needed; at very small sizes a curve may read better as a few deliberately placed pixels than as a smooth path.
• Preview at actual size (100 percent) and judge the result there, not only zoomed in.

A single master scaled to every size usually works poorly. A practical approach is to keep a separate, hand-tuned version for the smallest size and another for the next size up, while larger icons can usually be exported from the normal simplified artwork. Keep these versions as separate artboards in the same editable file so they can be updated together later.

Export the file set

Browsers and platforms request icons in different formats and sizes, so a favicon is normally delivered as a small set of files rather than one image. The table below describes the commonly used types; exact requirements vary by browser and platform version, and no browser support data was provided for this article, so check current platform documentation before finalizing.

File | Typical content | Purpose

favicon.ico | Small raster sizes such as 16x16 and 32x32 combined in one container | Broad fallback for browsers and tools that look for a classic favicon

SVG icon | Vector version of the simplified mark | Scalable icon for browsers that support SVG favicons; can include a style rule for dark mode

PNG icons | Individual raster sizes | Explicit sizes for browsers that prefer PNG

Apple touch icon | Larger PNG, commonly 180x180, usually on a solid background | Home-screen shortcut on Apple devices

Web app manifest icons | Larger PNGs, commonly 192x192 and 512x512 | Installable web app and Android home-screen use

Export each raster size from the artboard designed for it, rather than resampling one large PNG down. For the SVG version, remove unnecessary editor metadata, hidden layers and embedded raster images, and confirm the file contains only paths. If you want the SVG icon to adapt to dark browser themes, it can include a color rule that responds to the user's color-scheme preference; keep a raster fallback, since not every browser honors SVG favicons.

Declare the icons in your HTML

Place link elements in the head of your pages so browsers know which files to use. Replace each placeholder with the path to the corresponding file on your site.

<link rel="icon" href="[path to favicon.ico]" sizes="32x32">
<link rel="icon" href="[path to icon.svg]" type="image/svg+xml">
<link rel="apple-touch-icon" href="[path to apple-touch-icon.png]">
<link rel="manifest" href="[path to manifest file]">

Browsers cache favicons aggressively, so an updated icon may not appear immediately. Testing in a private window, or after clearing the browser cache, gives a more reliable view of what new visitors will see.

Final inspection

• The source logo was confirmed as editable vector paths, not an embedded raster image.
• The smallest sizes were checked at actual size and edges look sharp, not fuzzy.
• The icon is recognizable in a real browser tab on both light and dark themes.
• Text in the icon is outlined, and an editable master is kept separately.
• The SVG contains no embedded images, hidden objects or leftover metadata.
• Every file referenced in the HTML exists at the stated path and loads without errors.
• Rights to modify the logo and use any included typeface have been confirmed.

What this article does not cover

No verified data was supplied on specific browser versions, editor features, tool prices or test results, so this guide describes general practice rather than measured performance. Size recommendations above reflect common conventions; confirm current requirements for the specific browsers and platforms your audience uses.