How to make a favicon for a website: sizes, formats and installation

A favicon is seen more often than the logo itself. Which files a website needs today, how to make them from a logo in a minute and how to check everything works.

A favicon is seen more often than the logo itself: on a browser tab, in bookmarks, in history, on a phone home screen and next to the site name in Google. A website without a favicon looks unfinished, and among a dozen open tabs it is simply impossible to find.

Once a single 16 × 16 favicon.ico was enough. Now there are more devices and each asks for its own size. By hand that is half an hour in a graphics editor; with a generator it is a minute.

ReferenceWhich favicon sizes you need

The last row is not a favicon, but it is handy to make at the same time: it is the picture that Telegram, WhatsApp or Facebook show when someone sends a link to your website.

How-toHow to make a favicon from a logo: 4 steps

1. Open the generatorGo to the Favicon generator. No sign-up is needed.
2. Upload the logoBest of all a simple mark without small text. PNG, JPG or SVG will do.
3. Choose the backgroundTransparent, white or the brand colour. Every size is created automatically.
4. Download the archiveInside are favicon.ico, the PNG icons and ready-made code for the website.

DesignWhat to put on a favicon

On a tab the icon takes up 16 pixels. At that size five letters of lettering turn into a grey stripe. Three options work.

The mark from the logo. If the logo has a separate symbol, use it without the lettering.

The first letter of the name. A bold letter on a brand-coloured background reads even at the smallest size.

A simplified version. A complex mark with thin lines should be simplified: remove small details, thicken the lines.

A transparent background looks tidy, but check the icon in the browser’s dark theme: a dark mark on a dark tab disappears. If so, choose a white or brand-coloured backing.

WebsiteHow to install a favicon on a website

WordPress. “Appearance” → “Customize” → “Site Identity” → “Site Icon”. Upload a 512 × 512 PNG – the system makes the other sizes itself.

Website builders. The site settings usually have a “Favicon” or “Site icon” section with an upload field.

Your own website. Put the files from the archive in the root folder of the site and paste the ready-made code into the head section of every page.

After installing, open the site in a private window: browsers keep the old icon in memory for a long time, and in an ordinary window you may still see the previous one.

SearchWhy the favicon does not show in Google

The icon is not square or is too small. Google accepts square icons with a side that is a multiple of 48 px: 48, 96, 144 and larger.

Not enough time has passed. Search updates the favicon after the next crawl of the home page. That can take from a few days to a few weeks.

The file is blocked from the crawler. Check that the icon opens by its direct address and is not disallowed in robots.txt.

The icon is set on some pages only. Google takes the favicon from the home page of the site.

DetailsDark theme, SVG and toolbar colour

Dark theme. More and more people use a dark browser theme. A black mark on a transparent background disappears there. The simplest fix is a coloured or white backing with rounded corners.

SVG favicon. Modern browsers understand a vector icon: it is sharp at any size. But Safari and older browsers do not fully support it, so SVG is added alongside PNG and ICO, not instead of them.

Toolbar colour on Android. You can set a brand colour in the site code and the top bar of Chrome on a phone will be tinted with it. A small thing that makes a site feel like an app.

ChecklistChecks after installing

1. Browser tabOpen the site in Chrome, Safari and Firefox: the icon is there and it is sharp.
2. Dark themeSwitch the browser to dark and see whether the mark is visible.
3. Phone shortcutAdd the site to the home screen on iPhone and Android: your icon should appear, not a screenshot of the page.
4. Direct addressOpen yoursite/favicon.ico – the file should load.
5. Link previewSend yourself a link to the site in a messenger: a picture and a title appear.

HonestlyThe tool shrinks the logo. A mark for small sizes is drawn by a designer

The generator makes every file you need from the logo you uploaded. If the logo is long lettering without a mark, at 16 pixels it will be illegible all the same: software will not invent a symbol for it.

A responsive version of the logo – a separate mark that reads on a tab and in an avatar – is something we design together with the logo: logo design.

Look at the icon at real size among other tabs. If your site cannot be recognised in a second, the mark needs simplifying.

FAQFAQ