You get favicon.ico, the PNG sizes, an Apple touch icon, Android and maskable icons, a web manifest and the HTML to paste, all in one .zip. Make a complete icon set for your website from a letter or an image. It is free and private.
How to make a favicon
- Under Start from, choose A letter or An image. For an image, press Choose an image.
- For a letter, type your Letters and pick the Weight, Font, Text colour, Style and Background.
- Choose the Shape: Square, Rounded or Circle. Adjust Padding, or Keep the background transparent.
- Under Your site, add the Site or app name, Short name and Icon folder.
- Check the Preview, which shows the icon in a browser tab, in search results and on a phone.
- Press Copy HTML for the code to paste into your page, and Download all (.zip) for the files.
What each file is for
favicon.ico holds 16, 32 and 48 pixel versions in one file and works in every browser, old ones included. The PNG favicons give modern browsers a sharp tab icon. apple-touch-icon.png is used when someone adds your site to an iPhone or iPad home screen, and the Android icons plus site.webmanifest are used when your site is installed on Android or as an app.
What is a maskable icon?
Android crops app icons into circles, squircles or rounded squares depending on the phone. A maskable icon fills the whole square with your background colour and keeps the logo inside the middle 80%, so nothing important is cut off whatever shape the phone uses.
Tips for a clear favicon
At 16 pixels, detail disappears. A bold letter, a simple mark or the most recognisable part of your logo works better than the full logo with words. Strong contrast between the mark and the background helps it stand out among other tabs, in both light and dark browser themes.
Adding the icons to your site
- Unzip the files and upload them to the folder you named under Icon folder, usually the top level of your site.
- Paste the copied HTML into the head section of every page.
- Reload the page and clear your browser cache if the old icon keeps showing. Browsers hold on to favicons for a long time.
- Start with a square image at least 512 pixels wide so every size looks sharp.
Who uses it
Small business owners with a new website, freelancers building sites for clients, bloggers, and students putting a project online. For resizing or converting your logo first, try the image converter.
Questions
Is my image uploaded?
No. The icons are made in your browser.
Which image formats can I use?
PNG, JPG, SVG and WebP.
Why does my old favicon still show?
Browsers cache favicons for a long time. Clear the cache or open the site in a private window to check.