Free Favicon Generator

Turn an image or text into favicons in every size you need — 16px to 512px, including Apple touch and Android icons. Runs entirely in your browser.

Building a brand?

Our designers create logos, colour systems and brand assets that make your business instantly recognisable.

01Overview

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, history and, on mobile, home screens. Google also shows favicons next to your site in mobile search results, so a clear favicon helps people recognise your brand at a glance.

This free favicon generator creates favicons from an uploaded image or from text or an initial with your choice of shape, background and text colour. It outputs every common size from 16px to 512px plus the HTML snippet to paste into your site's head.

Everything runs in your browser, so your logo is never uploaded to a server.

Quick answer

Upload a square logo (at least 512 x 512 px) or create an icon from text, then download each size and paste the generated HTML into your site's head. On WordPress, you can instead upload a 512 x 512 image under Appearance, Customize, Site Identity.

  • Free, no sign-up
  • Image or text
  • 16px to 512px
  • HTML snippet included
02How to use

How to use the Favicon Generator

Simple, bold shapes work best at tiny sizes.

  1. Choose image or text

    Upload a square PNG, JPG or SVG, or type an initial.

  2. Style it

    For text icons, choose rounded square or circle, background and text colour.

  3. Generate and download

    Download each size you need.

  4. Add to your site

    Upload the files and paste the HTML snippet into the head of your theme.

03How it works

The favicon HTML

Paste these tags into the head of every page.

One mark, every size
B16 tab
B32 retina tab
B48 Google
B180 Apple
B192 Android
B512 PWA

16, 32 and 48 px are shown at true size, larger sizes are scaled down. At 16 px only a bold, simple mark survives.

Favicon tags<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" sizes="512x512" href="/icon-512.png">

Google requires a favicon that is a multiple of 48 x 48 px to show it in search results. The 192 or 512 px sizes cover this.

Worked example

Turning a wide logo into a favicon.

Full logo
Wordmark, too detailed at 16px
Favicon
Logomark or initial only
Background
Brand blue #024C96
Shape
Rounded square
A bold single mark stays recognisable in a crowded row of browser tabs.
04Reference

Favicon sizes and where they are used

Each size has a specific job.

SizeUsed for
16 x 16Browser tabs
32 x 32Tabs on high-resolution screens, taskbar shortcuts
48 x 48Google search results minimum, Windows site icons
180 x 180Apple touch icon, iPhone and iPad home screen
192 x 192Android home screen, Google search results
512 x 512Progressive web app splash screens, WordPress site icon
05Tips

Favicon design tips

At 16 pixels, every detail disappears except the boldest shapes.

Do this

  • Use a simple markOne letter, symbol or logomark. Never the full logo with text.
  • Add a solid backgroundA coloured square or circle keeps the icon visible on light and dark tabs.
  • Test at real sizeView it at 16px in a real browser tab before publishing.
  • Match your brandUse your main brand colour so the tab is instantly recognisable.

Favicon mistakes to avoid

  • Using the full logoWordmarks become an unreadable smudge at 16px.
  • Transparent thin linesFine strokes disappear on dark browser themes.
  • Only one sizeA single 16px file looks blurry on retina screens and home screens.
  • Forgetting cacheBrowsers cache favicons heavily. Hard refresh or rename the file to see changes.
06FAQ

Frequently asked questions

What size should a favicon be?

Create several: 16, 32, 48, 180, 192 and 512 pixels. Start from a square source image of at least 512 x 512 px.

How do I add a favicon to WordPress?

Go to Appearance, Customize, Site Identity and upload a 512 x 512 px Site Icon. WordPress creates the sizes for you.

Why is my favicon not showing in Google?

Google needs a crawlable favicon that is a multiple of 48 x 48 px, linked from your homepage. It can take days or weeks to update.

Should a favicon be PNG, ICO or SVG?

PNG works everywhere today. ICO is only needed for very old browsers. SVG favicons are supported by most modern browsers.

Is my image uploaded anywhere?

No. The favicon is generated in your browser.

Why does my old favicon still show?

Browsers cache favicons. Clear your cache, open the site in a private window, or rename the file.

The Big Growth team

Need a logo that works at every size?

We design logos and brand marks that look sharp everywhere, from a 16px browser tab to a billboard. Explore our brand identity design services.