wpthemecustomizerAny website (HTML, static, custom)
- Download the pack and unzip it.
- Upload every file to the folder you set as the favicon path (default: the site root, next to your homepage).
- Paste this into the
<head>of your pages:
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
1 to 3 letters. Pick the font and colors below.
Nothing is uploaded. Works with any website. Already have one? Check it.
2Style it Watch the previews update on the right
+Web app manifest (Android)Optional. Used when someone adds your site to their Android home screen.
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.
3Download
- 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.
- 512px PNG only: one square image. This is what site builders such as WordPress, Shopify, Wix and Squarespace ask for in their settings.
Google result
your website
AllImagesVideosNews
Your websiteyourwebsite.com
The small things make a big difference. Find what is missing from your website and exactly how to fix it, in about a minute.
Browser tab
Your websitex
Another tab
32 px
bookmarks
bookmarks
48 px
Windows
Windows
180 px
iPhone home screen
iPhone home screen
192 px
Android
Android
Phone
9:41●●● ▲ ▮
Photos
Maps
Notes
Music
Mail
Your website
Camera
Clock
9:41●●● ▲ ▮
Your website
Your websiteAnother tab
Left: saved to the home screen (uses the 180 px icon). Right: mobile browser address bar and tab switcher.
Android (web app manifest)
Home
Gmail
Drive
Maps
MySite
Splash
23:11
My Website
Switcher
23:16
Add it to your website
Works with any site. Pick the route that matches how your site is built.
Site builders (WordPress, Shopify, Wix, Squarespace)
- Use 512px PNG only above. You need just that one file.
- WordPress: Appearance, then Customize, then Site Identity, then Site Icon (or Settings, then General on 6.5 and newer). Upload, publish, clear your cache.
- Shopify: Online Store, then Themes, then Customize, then Theme settings, then Favicon.
- Wix: Settings, then Website settings, then Favicon. Squarespace: Website, then Website tools, then Browser icon.
- The platform generates the other sizes for you.
How it works
From a logo file to a complete icon pack in about a minute.
1
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
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
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.
How to get the most out of it
Small choices that make the icon look right everywhere.
Start from a square, transparent logo
A 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 logos
Thin 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 site
Android 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 installing
Once 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.
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
Already live?
Run the favicon checker to confirm every size is being picked up.