How to Make a Favicon from Your Logo

A favicon is the small brand symbol a browser can show beside a page title. A full wordmark usually becomes unreadable at that size, so start with the simplest recognizable part of your logo.

Choose the mark

Use a square canvas and keep a little space around the symbol. Remove a tagline, tiny lettering and fine lines that disappear at small sizes. If the logo relies on a wordmark, consider a distinct initial or a simplified icon rather than shrinking the whole name.

Check the icon on light and dark browser themes. A white symbol on a transparent background may disappear on a white tab; a dark symbol may disappear on a dark surface. Add a suitable background shape or create variants if necessary.

Export the files

An SVG is useful when your simplified mark is vector artwork, while a PNG is a straightforward raster option. Keep the source file so you can adjust spacing and colors later. Do not assume that changing a PNG extension to SVG creates vector paths.

For Google Search favicon eligibility, Google's current guidance says the image must be square and at least 8 × 8 pixels; it recommends a size larger than 48 × 48 pixels. Google lists supported formats separately, so check its documentation before relying on SVG for that particular search result surface. Google also says that providing a favicon does not guarantee that it will display in results.

Add it to the site

Place a link in the page head that points to a stable icon URL. The browser uses the link's icon relationship to find the file. For example:

<link rel="icon" href="/favicon.png" type="image/png">

The MDN documentation for the icon link explains how browsers select among multiple icon links. If you offer more than one format, check which one the browsers you care about actually use.

Check the result

1. Open the favicon URL directly and confirm it returns the image, not an error page.
2. Reload the site in a fresh tab. Browsers cache favicons aggressively, so use a private window or a new URL when investigating an old icon.
3. Inspect the result at real tab size, not only on a large design canvas.
4. Check whether a social bookmark, pinned tab or mobile shortcut needs a separate icon; those surfaces may have different behavior.
5. Keep the URL stable after launch. Google's favicon guidance says its systems need to crawl the home page and icon and may take time to refresh.

A good favicon is a tiny recognition cue. It does not need to include every visual detail in the full logo.