azokroma
Blog · Digital marketing

Favicon: sizes, formats and best practices for your website

The favicon appears in the tab, bookmarks and Google results: which sizes, which formats (SVG, ICO, PNG) and which tags to provide.

Published on By The azokroma team2 min read
Favicon: sizes, formats and best practices for your website

Create your company’s complete brand identity in 5 minutes.

Create my brand

What a favicon is for

The favicon is your site’s small icon: it appears in the browser tab, bookmarks, history and, for eligible sites, next to the result in Google. It is often the only part of your brand visible there. A default or unreadable favicon makes a site look unfinished.

Which visual to choose

  • The symbol alone, not the full logo: text becomes unreadable at 16 or 32 pixels.
  • A simple shape, with few details and strong contrast.
  • A controlled background: a transparent background can disappear on a dark tab, a solid one guarantees legibility.
  • The same colours as your brand palette.

Sizes and formats to provide

Platform requirements change: check their official documentation before producing your files.
FileSizeUse
favicon.svgVectorModern browsers: sharp at every size
favicon.ico32 × 32 px (or multi-size)Older browsers and crawlers that request /favicon.ico
icon-48.pngMultiple of 48 px (48, 96, 144…)Recommended by Google for search
apple-touch-icon.png180 × 180 pxHome screen on iPhone and iPad
icon-192.png and icon-512.png192 and 512 pxWeb app (PWA manifest)

To export a symbol properly, see the guide to logo file formats.

Declaring the favicon in the page

Put these tags in the head of every page, with paths absolute from the site root:

  • <link rel="icon" href="/favicon.ico" sizes="32x32">
  • <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  • <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • <link rel="manifest" href="/manifest.webmanifest"> if you offer a web app.

Favicon and Google results

Google may show your favicon in search results. It must be a square of at least 48 × 48 pixels, accessible to crawlers (not blocked by robots.txt) and representative of the site. Google may decline to show an inappropriate icon, and updates can take several days or even weeks. Display is never guaranteed.

  1. One favicon for the whole site, declared on the home page.
  2. A stable URL: avoid renaming the file with every version.
  3. No robots.txt block on the icon or the home page.
  4. A test in private browsing after publishing, to bypass the browser cache.

The azokroma pack delivers the symbol alone and the favicon, ready to declare, in your colours.

Create my brand

Frequently asked questions

What size should a favicon be?

An SVG file, a 32 × 32 px ICO, a PNG whose size is a multiple of 48 px for Google, and a 180 × 180 px apple-touch-icon cover most uses.

Why does my favicon not change after an update?

Browsers cache it for a long time. Test in private browsing, clear the cache, and keep a stable URL for the file.

Does a favicon improve SEO?

It does not raise your ranking, but it makes the result more recognisable and reassuring, which can help earn the click.

Can I use the full logo?

It is not recommended: text is unreadable when small. Use the symbol alone, or the initial if the brand has no symbol.

Comments

No comments yet. Be the first to react.

Leave a comment

No e-mail asked. Your comment is published after review. Nickname and text are kept until you ask for removal (see the privacy policy).

Try it in azokroma

Pick a name, a symbol, colours and a font, then get an exclusive design removed from the catalogue the moment you buy it.

Create my brand

Sources

Keep reading

SVG, PNG, PDF, EPS: which logo format for which use?
Logo

SVG, PNG, PDF, EPS: which logo format for which use?

Vector or bitmap, transparent or not: the guide to logo file formats, with favicon sizes and good export habits.

Visual consistency and digital marketing: a brand recognisable everywhere
Digital marketing

Visual consistency and digital marketing: a brand recognisable everywhere

Website, social networks, e-mails, ads: how to keep the same visual identity everywhere with a brand kit and a simple checklist.

SEO for a brand website: the basics to know
Digital marketing

SEO for a brand website: the basics to know

Titles, descriptions, heading structure, images, speed, blog and structured data: the fundamentals of organic search for a brand or small-business website.

Colour psychology: how to choose the colour of your logo
Colours

Colour psychology: how to choose the colour of your logo

Blue, red, green, yellow… what each colour suggests, how to choose according to your industry, and the mistakes to avoid before locking in your palette.

← All articles