How to Create a Favicon From an Image
2026-06-06
A favicon is the tiny icon shown next to a page's title in a browser tab, bookmark or history list. It's a small detail, but a site without one looks unfinished and is harder to spot among a row of open tabs. The good news: you can generate a complete set from a single image in seconds.
Why you need several sizes
Different places ask for the icon at different sizes: 16×16 and 32×32 for browser tabs, 180×180 for the Apple touch icon when someone saves your site to an iPhone home screen, and 192×192 and 512×512 for Android and progressive web apps. Rather than make each by hand, a generator produces the whole set at once. Our favicon generator does exactly this from one source image.
Start from the right image
Use a square image with a simple, bold design — fine detail and small text disappear at 16 pixels. If your source isn't square, crop it to a square first, focusing on the core symbol. A solid background usually reads better than transparency at tiny sizes. If the image is huge, a quick resize down beforehand keeps things tidy.
Putting it on your site
Download the generated files, drop them in your site's root folder, and link them from the page's <head>: the .ico file covers older browsers while the PNGs handle modern devices. For a tiny inline icon you can also turn an image into a Base64 data URI and embed it directly. Because the icons are generated locally, your unreleased logo never gets uploaded anywhere.