Nookbyte Make a favicon
Turn a letter, an emoji or your logo into every icon a website needs: favicon.ico, the Apple touch icon, Android icons and the manifest, with the HTML to paste. The icons are made on your device, so nothing is uploaded.
favicon.ico16, 32 and 48 px in one file, for every browser
favicon.svgSharp at any size, for modern browsers
apple-touch-icon.png180 × 180, for iPhone and iPad home screens
icon-192.png192 × 192, for Android, listed in the manifest
icon-512.png512 × 512, for Android, listed in the manifest
- JSONsite.webmanifestThe name, colours and icons for phones
Paste this into the <head> of your pages
Put the files in the top folder of your site, next to your home page.
How to add a favicon to your site
- Type a letter or an emoji, or choose your logo. Pick the colours and the corners.
- Check the preview in the light and dark browser tabs and on the phone.
- Download the .zip and put the files in the top folder of your site.
- Copy the HTML and paste it into the
<head>of your pages.
What each file is for
favicon.ico holds the 16, 32 and 48 pixel icons that browsers show in tabs and bookmarks. favicon.svg is a sharp version that modern browsers prefer. apple-touch-icon.png is used when someone adds your site to an iPhone or iPad home screen. site.webmanifest lists icon-192.png and icon-512.png for Android phones.
Questions
What files does a website need for its icon?
Most sites need four things: favicon.ico for older browsers and tools that look for it, apple-touch-icon.png for iPhone and iPad home screens, two PNG icons listed in site.webmanifest for Android, and, when you start from text, favicon.svg, which modern browsers use and which stays sharp at any size. This tool makes all of them, plus the HTML that links them.
Where do I put the files?
Upload them to the top folder of your site, the same folder as your home page, so that yoursite.com/favicon.ico opens the icon. Then paste the HTML into the <head> of every page. Site builders such as Shopify, Wix and Squarespace have their own favicon setting instead; upload one of the PNG files there.
Why is the Apple touch icon square?
iPhones and iPads round the corners of home screen icons themselves, and show see-through parts as black. So apple-touch-icon.png is always square with a solid background, even when your other icons have rounded corners or no background.
Does the SVG favicon look the same everywhere?
favicon.svg stores your text rather than a picture of it, so it stays sharp at every size. Each visitor's browser draws that text with its own system font, so the letter can look a little different from the PNG files. The PNG and ICO files always look exactly like the preview.
Can I use an emoji?
Yes. Type or paste an emoji as the text. The PNG and ICO files use your device's emoji design. In favicon.svg, each visitor sees their own device's emoji design, so it can look different on Windows, Mac and Android.
Which image works best?
A simple logo or symbol on a square image, at least 512 × 512 pixels. Fine detail and small text disappear at 16 pixels, so a bold shape or one or two letters reads best in a browser tab.
Is my image uploaded?
No. The icons are made by your browser on your device. Your image is never sent to Nookbyte or anyone else.
Is it free?
Yes. There is no account, no watermark and no limit.