IMAGE TOOLS
Favicon Generator
Create a complete browser, Apple touch and PWA icon package from an image or logo.
Quick answer: Choose a source image, adjust fit, padding and background, then download the ICO, PNG sizes, manifest and HTML snippet in one ZIP.
Use Favicon Generator ↓Loading the tool…
How to use Favicon Generator
- Choose a square markUse a simple logo or symbol at least 512×512 px that still reads at tiny sizes.
- Adjust fit and backgroundAdd padding so edges are not clipped and choose a background if the logo is transparent.
- Download the packageGet the ICO, PNG sizes, manifest and HTML snippet in a ZIP, then paste the snippet into your page head.
About this tool
A favicon is the small icon in browser tabs and bookmarks. Upload a square logo, and you get all the common sizes, a web manifest and the HTML to paste into your page head, packaged in a ZIP.
Common uses: Prepare favicon files, Apple touch icons and basic PWA assets for a personal site, small business, documentation project or web app.
Practical example: Start with a square source image, leave enough padding for small sizes, and test the generated icon against both light and dark browser chrome.
Important limitation: A small favicon cannot preserve every detail of a complex logo. Simplify the source mark when it becomes unreadable at 16 or 32 pixels.
Icons are resized and packaged locally in your browser; your image is not uploaded. Read the privacy information.
How it works
Your source image is scaled to each required size on a canvas and packaged as an ICO, PNG files, a web app manifest and a ready-to-paste HTML snippet inside one ZIP.
Real-world uses
- Launching a new website with a full icon set
- Adding home-screen icons to a progressive web app
- Refreshing an old favicon after a rebrand
Designing an icon that holds up at 16 pixels
A favicon is often shown at 16 by 16 pixels. Fine detail disappears, so use a simple, bold mark with good contrast, and a source image of at least 512 by 512 pixels. Leave some padding so the shape is not clipped by rounded corners on phones.
The package covers the sizes browsers and devices ask for: a classic ICO for older browsers, PNG sizes for tabs and shortcuts, an Apple touch icon for iPhone home screens, and icons referenced in the web app manifest. Paste the HTML snippet into the head of each page, and upload the files to the root of your site.
If the new icon does not appear, browsers cache favicons aggressively. Clear the cache or try a private window, and check that the paths in the HTML match where you uploaded the files.
Tips for better results
- Test at 16×16: if the shape is unrecognizable, simplify it.
- Use a solid background for the Apple touch icon; iOS fills transparency with black.
- Upload the files to your site root so /favicon.ico is found automatically.
Frequently asked questions
What files are included?
The package is designed to include common PNG and ICO sizes, a manifest and an HTML snippet for linking the icons.
Should the source image be square?
A square source generally produces the most predictable favicon results and avoids unintended cropping.
Are my files uploaded?
Icons are resized and packaged locally in your browser; your image is not uploaded.
Which favicon sizes do I need?
A 32×32 or multi-size ICO, a 180×180 Apple touch icon and 192/512 px PNGs for the web app manifest cover current browsers and devices.
Why isn't my new favicon showing?
Browsers cache favicons aggressively. Clear the cache or open the page in a private window to check.
Why does my new favicon not show?
Browsers cache favicons. Clear the cache, open the site in a private window, and check the link paths in your HTML.