What is a favicon and how do you create one for your website?

A favicon is the small icon that appears in browser tabs, bookmarks and address bars. It stands for 'favourites icon' and gives every page on your site a recognisable visual mark. Favicons also appear in Google Search results on mobile and in the Google Discover feed, so a missing or generic favicon can make your site look less professional before anyone reads a word.

What exactly is a favicon?

A favicon is a small image file that websites use as a visual shortcut. When someone opens your site, the browser loads and displays that tiny icon next to the page title in the tab. The same icon carries through to bookmarks, browser history and search results. Originally designed as a 16x16 pixel ICO file for Internet Explorer's favourites menu, the standard has grown to support PNG and SVG formats at larger sizes. Modern browsers accept multiple sizes and formats so the icon stays crisp on retina screens and taskbars.

Why your website needs a favicon

A favicon is not strictly required, but every professional website has one. The practical reasons go well beyond appearance:

• Brand recognition. Visitors with multiple tabs open scan for the icon, not the text. Your favicon is the same visual cue your logo gives on a business card.
• Professional signalling. A non-existent favicon means the browser shows a blank page icon, which in the age of cheap website builders tells visitors the site may not be maintained.
• Google Discover appearance. When your pages appear in Google Discover or mobile search results, the favicon sits alongside your title as a brand marker. Google recommends a favicon for Discover eligibility.
• Bookmark identification. When a user bookmarks your site, the icon helps them find you again in a list of many bookmarks.

Technical requirements

Google and most modern browsers accept three formats for the favicon:

• ICO format: the original format, typically 16x16 or 32x32 pixels. Still widely supported and safe as a fallback.
• PNG format: the simplest modern choice. A 48x48 pixel PNG scales well across desktop tabs, mobile browsers and address bars. 32x32 or 64x64 pixels also work depending on where you place the icon.
• SVG format: a vector format that scales perfectly at any size. Some older browsers do not support SVG favicons, so include an ICO or PNG fallback.

The standard approach is to create a 48x48 PNG and supply an ICO fallback for older browsers. Most browsers automatically look for a file called favicon.ico in the root directory of your website. You can also declare the favicon explicitly in your page head with a link element.

How to create a favicon for free

There are several ways to make a favicon without hiring a designer:

• Canva. Canva's free plan includes square templates sized for favicons. Design using your brand colours, export as PNG, then resize to 48x48.
• Online favicon generators. Tools like favicon.io, realfavicon.net and Favicon Generator let you upload an image, choose your format and download a ready to use icon pack with HTML code. These are the fastest route if you already have a logo.
• Professional designer. If you need a brand-aligned icon that looks polished across every surface, a designer can create a custom SVG favicon from your logo. This is the most reliable option for a business that cares about brand consistency.

How to add your favicon to your website

The simplest method is to save your file as favicon.ico and upload it to the root directory of your website. Browsers check this location automatically. If you want to use a different filename or a PNG or SVG format, add a link element in your HTML head:

<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">

For an SVG version, use type "image/svg+xml". For an ICO fallback, use type "image/x-icon". Most content management systems let you upload a favicon through the theme or settings area, which adds this code automatically.

The most common mistake is resizing a high resolution logo to 48x48 and ending up with a muddy, unreadable icon. A good favicon is simple: one or two shapes, thick lines and high contrast against both light and dark browser tab colours.

If you have a Victory Digital client dashboard, you can request a favicon as part of a brand refresh from our design team. Need help with your site? Get in touch at https://victory.digital/client-dashboard