How to Make a Favicon for Your Website

A favicon is not a miniature poster. Fine lettering, thin outlines, small gaps, and several separate objects often merge into an unclear patch in a browser tab. Use one recognizable shape, strong contrast, and enough empty space around the important part. Initials can work if the letterforms are bold and uncomplicated.

A square source of at least 512 by 512 pixels is a practical starting point. Smaller files can still be processed, but the 512 pixel Android icon must be enlarged and may look soft. An SVG source can stay crisp when rendered at the required sizes, provided its design is simple enough for the smallest preview.

Test recognition rather than admiring only the large source. The generator previews 16, 32, 48, and 180 pixel versions on both light and dark strips. If the 16 pixel version loses its identity, simplify the artwork or increase the visual weight of its main shape.

The generated favicon.ico is a real ICO container with 16, 32, and 48 pixel PNG images inside it. Browsers can select the entry closest to the size they need. Separate favicon-16x16.png and favicon-32x32.png files support explicit PNG links in the supplied HTML.

The 180 pixel apple-touch-icon.png is intended for Apple home-screen shortcuts. The 192 and 512 pixel Android files are referenced by site.webmanifest. The manifest starts with blank name and short_name fields, plus white theme and background colors, so inspect and complete it for your site.

These files serve related but different contexts. A browser tab may use the smallest icon, while a phone home screen can show a much larger tile. Generating each size from the same source keeps the visual identity consistent, but you should still inspect every preview before publishing.

The tool accepts one PNG, JPG, WebP, SVG, GIF, BMP, or AVIF file up to 50 MB. A square source works best, but fitting controls can place a rectangular image inside the square canvas or crop it to fill the canvas.

Contain shows the complete source image and leaves any unused square area as background. It is useful when cropping would remove letters or the edge of a logo. Cover fills the available square, but it crops overflow from the center, so check that an off-center subject has not been cut away.

Padding creates breathing room between the artwork and the icon edge. Too much padding makes the mark tiny in a tab; too little can make it feel cramped. A small adjustment is often enough. If the source includes unwanted space already, use the image cropper before generating the set.

Transparent backgrounds work for many browser icons, but transparency can behave differently on home screens. Apple devices may fill transparent areas with black, so a solid background can be safer for that use. Corner radius clips the whole square; do not combine a large radius with artwork that reaches into the corners.

Put the downloaded files in the root folder of the site so their paths match the generated link tags. Then paste the copied HTML links inside the head section of your pages or the shared layout that produces that section. The snippet points to /favicon.ico, both favicon PNGs, the Apple icon, and /site.webmanifest.

Edit site.webmanifest before publishing. Add an appropriate name and short_name, and review its theme_color and background_color. Keep the Android file names unchanged unless you also update their paths in the manifest. Deploy all files together so the links do not lead to missing icons.

Browsers often cache favicons for a long time. After deployment, confirm the files load directly, then test in a new private window or a separate browser if an old icon remains. If your source is an SVG with unnecessary editor data, the SVG optimizer can clean it before you create the set.

Do you need every file? The supplied set covers common browser and device uses, so installing it together is simpler than guessing which visitor needs which size. Can a photograph be a favicon? It can, but detailed photos usually become hard to recognize at 16 pixels. A simplified symbol works better.

Does the generator edit your original? No. It creates new icon files and leaves the source unchanged. Should you trust only the large preview? No. Judge the 16 pixel result first, then inspect the larger Apple and Android versions. Keep the source artwork so you can revise and regenerate the complete set later.