wpthemecustomizer
Schedule a call

Make a favicon

Upload your logo or type your initials. Preview it at real sizes and download every file your website needs.

or drop your logo here

Nothing is uploaded. Works with any website. Already have one? Check it.

2

Look

Add your logo above to see it in the previews
Logo treatment
3

Android optional

On Android, see-through parts of a home-screen icon are filled with the splash background. If you kept the logo as uploaded, choose a background here that suits it.

4

Download

  • Favicon pack: every file a website needs. favicon.ico, PNGs at 16 to 512 px, apple-touch-icon, Android icons, site.webmanifest and a paste-ready HTML snippet.

Add it to your website

Works with any site. Pick the route that matches how your site is built.

Any website (HTML, static, custom)

  1. Download the pack and unzip it.
  2. Upload every file to the folder you set as the favicon path (default: the site root, next to your homepage).
  3. Paste this into the <head> of your pages:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Site builders (WordPress, Shopify, Wix, Squarespace)

  1. Unzip the pack and use android-chrome-512x512.png. You need just that one file.
  2. WordPress: Appearance, then Customize, then Site Identity, then Site Icon (or Settings, then General on 6.5 and newer). Upload, publish, clear your cache.
  3. Shopify: Online Store, then Themes, then Customize, then Theme settings, then Favicon.
  4. Wix: Settings, then Website settings, then Favicon. Squarespace: Website, then Website tools, then Browser icon.
  5. The platform generates the other sizes for you.

Browser tab

Your websitex
Another tab

Google

your website
AllImagesVideosNews
Your websiteyourwebsite.com
Your website: A little check. A healthier website.

The small things make a big difference. Find what is missing from your website and exactly how to fix it, in about a minute.

iPhone

9:41●●● ▲ ▮
Photos
Maps
Notes
Music
Mail
Website
Camera
Clock
9:41●●● ▲ ▮
yourwebsite.com⋮
Your website
Your websiteAnother tab

Sizes

32 px
bookmarks
48 px
Windows
180 px
iPhone home screen
192 px
Android

Android

Home
Gmail
Drive
Maps
MySite
Splash
23:11
My Website
Switcher
23:16
My Website

How it works

From a logo file to a complete icon pack in about a minute.

  1. 01

    Add your logo or initials

    Drop a PNG, JPG, SVG or WebP, or type one to three letters. Everything happens in your browser, nothing is uploaded.

  2. 02

    Style and preview

    Pick a background, shape and corner radius, then watch the live previews: a Google result, a browser tab, an iPhone home screen and Android.

  3. 03

    Download and install

    Get the full pack with ICO, PNG, SVG and a web manifest, or just the 512 pixel PNG that site builders ask for.

What you get

Every file a modern website needs, made from one image.

Every size, one pack

favicon.ico plus PNGs from 16 to 512 pixels, so browsers, bookmarks, Windows tiles and app switchers all get a proper icon.

iPhone ready

A 180 pixel apple-touch-icon prepared the way iOS expects: solid background, no transparency, no double rounding.

Android manifest

A site.webmanifest with 192 and 512 pixel icons, your app name, short name, splash colour and theme colour.

Paste-ready snippet

The exact link tags for your head section, with the folder path you choose already filled in.

Real previews

See the icon in a Google result, a browser tab, a phone home screen and the Android app switcher before you download.

Initials mode

No logo yet? Letters on a coloured tile export as an SVG that stays sharp at every size.

Frequently asked

Is my logo uploaded anywhere?

No. Everything runs inside your browser. The image never leaves your computer, and nothing is stored on our server.

What is in the favicon pack?

favicon.ico (16, 32 and 48 pixel), PNGs at 16, 32, 48, 180, 192 and 512 pixels, an SVG when you use initials, a site.webmanifest, a README and a ready-to-paste HTML snippet.

Which file do I upload to my site builder?

Just the 512 pixel PNG. WordPress, Shopify, Wix and Squarespace each have a favicon or site icon setting, and the platform makes the other sizes for you. The guide above shows where that setting is on each one.

What size should my logo be?

Square, and at least 512 by 512 pixels. A transparent PNG works best. If your logo is wide, use the "Place it on a coloured tile" option so it does not get squashed.

Can I make a favicon without a logo?

Yes. Choose "Type your initials", pick one to three letters, a font and two colours. It exports as a crisp SVG as well as PNG and ICO.

Why does the iPhone preview look different from the Android one?

iOS masks the icon with its own rounded square and turns transparency black, so the pack gives iPhone a solid, un-rounded image. Android applies its own circle mask and uses the manifest colours you set.

Other free tools

Favicon checker

See whether your icon shows up in tabs, on iPhone and Android, and in Google results.

Open the tool

WordPress setup checker

Eighteen checks for SEO, security and the basics every new WordPress site needs.

Open the tool

Setup services

Rather have it done for you? See what we can set up and fix.

Open the tool

How to get the most out of it

Small choices that make the icon look right everywhere.

Make a favicon
  • Start from a square, transparent logoA square PNG with a transparent background gives the cleanest result, because nothing gets cropped and the tile colour shows through evenly. If your only logo is a wide wordmark, crop the symbol part first, or switch to initials. Tiny text in a 16 pixel icon is unreadable on every device.
  • Use the tile option for thin or light logosThin line logos and light colours vanish against a white browser tab. The "Place it on a coloured tile" option adds a background shape and breathing room. Pick a colour from your brand, keep the corner radius modest, and check the tab preview at 16 pixels.
  • Set the manifest colours to match your siteAndroid uses the splash colour behind your icon and the theme colour in the app switcher. Use your main background colour for the splash and your accent colour for the theme. The Android preview updates as you type.
  • Check it after installingOnce the files are on your site, run the favicon checker. It confirms that the icon shows up everywhere and that Google can use it. If something is missing, it is almost always a wrong folder path. The snippet in the pack matches the path you chose here.

Already live?

Run the favicon checker to confirm every size is being picked up.

Open the checker

Tell us what you need

Send a short message and we will get back to you.