A small icon, in every size it needs.
Make a favicon.ico with 16 to 256 px icons from a PNG or SVG, plus the 180 and 512 px icons sites use, in your browser. Nothing is uploaded.
By Suraj Kumar4 min read
A favicon is the small picture in a browser tab, a bookmark and a search result. A site usually wants it in a few sizes and two or three files. The KeepSimp image converter makes the .ico file, and the image resizer makes the PNG icons, both in your browser.
Start with a square picture.
Begin from the largest, cleanest version of your logo or mark, ideally an SVG or a PNG of at least 512 pixels. At 16 pixels only a simple shape reads, so a single letter or symbol often works better than a full logo with words.
Icons are square. The converter centres a picture that is not square on a clear square. To crop to a square instead, use the image resizer with a 1:1 size and drag the picture to choose what stays.
Current browsers can also show an SVG favicon, which stays sharp at any size. KeepSimp reads SVG but does not write it, so if your logo is already an SVG, you can use that file as it is beside the ICO, which older browsers and other software still look for.
Make the favicon.ico.
Open the image converter and add your picture. Under More options, choose ICO under Convert to. Tick the sizes the file should hold: 16, 24, 32, 48, 64, 128 and 256 pixels are offered, with 16, 32 and 48 ticked to start. Each size is stored inside the one file as a PNG, with its see-through parts kept.
Download favicon.ico and put it at the root of your site. Browsers ask for that address even when a page does not name it.
Make the PNG icons.
Phones and installed web apps use larger PNG icons. Open the image resizer, choose Presets under Size and then Icons: Favicon 32, Apple touch 180, App icon 192, App icon 512 and Store icon 1024. Add the same picture and download each size.
Name them as your HTML expects. The resizer's file names follow a pattern you set, such as icon-{width}.png.
Tell the page about them.
Add the lines below to the head of your pages. The icon line names the ICO file, the apple-touch-icon line the 180 pixel PNG for iPhones and iPads, and the manifest lists the 192 and 512 pixel icons for an installable web app.
Browsers keep favicons for a long time. After changing one, open the page in a private window to see the new icon.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Further reading
Topics: favicon generator · make a favicon · png to ico · convert png to ico · favicon.ico · ico converter · apple touch icon · favicon size
A little less theory. A little more doing.
Try it on your own terms, with a free browser tool.
Try the tool