What Is a Favicon and How Do You Add One to Your Website?

A favicon (short for ‘favourites icon’) is the small icon that appears in a browser tab next to your page title, in bookmarks, in browser history, and on smartphone home screens when someone saves a shortcut to your site. Despite being tiny — typically 16x16 or 32x32 pixels — it’s a meaningful part of your brand presence on the web.

A website without a favicon displays a generic browser icon in the tab. This small detail signals to visitors — consciously or not — that the site isn’t fully finished or professionally maintained. Adding a favicon takes minutes and is one of the easiest wins in web design.

Why Favicons Matter

Brand recognition is the primary reason to care about your favicon. When a user has ten tabs open, your favicon is the visual identifier that helps them find your site quickly. A distinctive icon — even at 16x16 pixels — can be immediately recognisable if it’s well designed. A blank or generic icon is invisible.

Favicons also appear in bookmark managers, reading lists, and browser history. For a returning customer or someone who bookmarked your site after a first visit, a clear favicon makes it easy to find you again. It’s a touchpoint that persists long after the initial visit.

On mobile devices, if someone adds your website to their home screen as a shortcut, the favicon (specifically a larger version called a ‘touch icon’) becomes an app-like icon on their phone. For businesses with returning customers or regular online visitors, this is a genuinely useful feature.

How to Create a Favicon

The simplest approach for most businesses is to use a simplified version of your logo — typically just the icon or initial mark rather than the full wordmark, which becomes illegible at small sizes. Export it as a square image at 512x512 pixels; most favicon generation tools will scale it down to the required sizes.

Use a free favicon generator like favicon.io or realfavicongenerator.net. Upload your image and the tool produces a package of files in all the required sizes and formats — .ico, .png, and SVG — along with the HTML code to paste into your site’s head section.

If your logo doesn’t reduce well to a small square, consider creating a simple icon specifically for the favicon: a first initial in your brand font, a geometric shape, or a simplified version of your logo mark. The goal is instant recognisability at tiny sizes.

How to Add a Favicon to Your Website

The method depends on your platform. In WordPress, go to Appearance > Customise > Site Identity and upload your favicon image in the ‘Site Icon’ field. WordPress handles the required HTML automatically.

For Squarespace, navigate to Design > Browser Icon and upload your image. On Wix, go to Settings > Favicon and upload through the interface there.

For custom-coded sites, upload your favicon files to the root directory of your site and add the appropriate link tags to the head of your HTML. The minimal version is: link rel="icon" type="image/x-icon" href="/favicon.ico" — but a full set of link tags covering different sizes and devices (as generated by realfavicongenerator.net) is more robust across browsers and platforms.