What's in this category
These are the two image jobs that come up constantly in web work and that don't need an image editor: producing the icon set a site needs in order to render correctly everywhere, and turning a small image into text you can paste directly into a stylesheet or markup file.
Favicon generator
A favicon is no longer a single file. Browsers, mobile home screens, and
installable web apps all want different sizes and formats — a classic
.ico, several PNG sizes, an Apple touch icon, and a web app manifest
referencing them. Getting one of these wrong usually shows up as a blurry icon or
a blank square on some device you didn't test.
Use this when you're launching a site and want the whole set generated from a
single source image, along with the <link> tags to paste into
your document head. Start from the largest, squarest version of your logo you
have — upscaling a 32×32 image never looks right.
Base64 image encoder
Encoding an image as a Base64 data URL lets you embed it directly in HTML or CSS instead of serving it as a separate file. That removes one network request, which is why it's a common technique for very small assets — icons, tiny background textures, inline SVG-adjacent graphics.
The tradeoff is size. Base64 inflates the data by roughly a third, and an inlined image can't be cached separately from the file it's embedded in. That makes it a good fit for small images used on a single page, and a poor one for anything large or reused across a site. As a rough rule, it's worth considering under a few kilobytes and rarely worth it above that.
Choosing between them
- Shipping a site and need icons? Favicon generator.
- Want to avoid a network request for a tiny graphic? Base64 image.
- Need to resize, crop, or compress? Neither — those want a real image editor.
Everything runs locally
Both tools process your image entirely in the browser using the Canvas and File APIs. Nothing is uploaded, so you can safely run unreleased logos and client artwork through them, and they work with no network connection once the page has loaded.