Create a favicon for your website

The little icon in the browser tab makes a site look finished. Create every size you need from a logo — or from a letter or emoji if you don't have one — plus the code to add it.

Nothing uploaded Free, no signup No watermark

1Add logo or type text
2Adjust the icon
3Download set

Drop your logo here

A square PNG or SVG of at least 512 × 512 pixels works best.

App icon

48 px

32 px

16 px

My Website✕

How it looks in a browser tab

Shape

Background

Padding

Small icons are easier to recognise with little or no padding.

Website name

Used in the web manifest (shown when someone adds your site to their home screen).

HTML code — paste inside <head>

Favicon set downloaded

Unzip the files into your website's main folder and paste the HTML code into the of your pages.

SVG to PNG Resize Image Remove Background Image to Base64

How to create and add a favicon

Add your logo, or type a letter or emojiA square logo with a transparent background works best. No logo yet? Choose "From a letter or emoji" and pick colours.

Check how it looks smallLook at the 16 px and browser-tab previews. If the icon is hard to make out, remove padding or try a simpler version of your logo, such as just its symbol or first letter.

Download, upload and paste the codeUnzip the set into your website's main (root) folder — the same place as your homepage file — then copy the HTML code into the <head> section of your pages.

What's in the favicon set?

favicon.ico — the classic file browsers look for automatically, containing 16, 32 and 48 pixel versions.
favicon-16x16.png and favicon-32x32.png — sharp PNG versions for modern browsers.
apple-touch-icon.png (180 × 180) — used when someone adds your site to an iPhone or iPad home screen.
android-chrome-192x192.png and 512x512.png — for Android home screens and installable web apps.
site.webmanifest — tells phones your site's name and which icons to use.

Using WordPress, Shopify, Wix or Squarespace?

You don't need the HTML code. Upload the 512 × 512 PNG in your site settings: in WordPress it's Appearance → Customize → Site Identity → Site Icon; in Shopify it's under Online Store → Themes → Customize → Theme settings → Favicon; Wix and Squarespace have a "Favicon" option in their site settings.

Design tips for tiny icons

At 16 pixels there's room for very little detail. Use a bold symbol or one letter, high contrast between icon and background, and avoid thin lines and small text. Many well-known brands use a simplified mark for their favicon rather than their full logo.

Frequently asked questions

Why isn't my new favicon showing?

Browsers cache favicons aggressively. After uploading, open your site in a private window, or add a version number to the file links (for example favicon.ico?v=2) to force browsers to fetch the new one.

What size should my logo be?

At least 512 × 512 pixels and square. An SVG logo is ideal because it scales perfectly to every size.

Is my logo uploaded?

No. All icons are generated in your browser and nothing is sent to a server.

Should the favicon have a transparent background?

Transparent works well in browser tabs. The Apple touch icon always gets a solid background (iPhones would otherwise show black), so we use your background colour, or white, for that file.