Favicon Generator

What the favicon generator does

A favicon is the small icon in the browser tab, the bookmark list, the phone home screen and, increasingly, in search results next to your site name. Browsers and operating systems each ask for different sizes and formats, which is why doing it properly means producing half a dozen files rather than one. This tool takes a single PNG, JPG or WebP logo, crops it to a square and exports PNG icons at 16, 32, 48, 180, 192 and 512 pixels. It also builds a genuine favicon.ico that contains the 16, 32 and 48 pixel versions, a site.webmanifest for Android and progressive web apps, and a head-tags.html file with the link tags already written. Everything arrives in one zip.

How to use it

• Prepare a square logo mark, ideally a PNG with a transparent background at 512 px or larger. If your logo is wide, make a simplified square version first; wordmarks become unreadable at 16 px.
• Upload the file and click generate. The previews show how the icon looks at tab size, on iOS and on Android.
• Download the zip and unpack it into the root directory of your website, so the files sit at addresses like yoursite.com/favicon.ico.
• Copy the head tags and paste them inside the head element of your template, then open site.webmanifest and fill in your site name and theme color.
• Hard refresh your browser. Favicons are cached aggressively, so a private window is the quickest way to confirm the new icon.

What each file is for

favicon.ico is the traditional format that every browser understands and that some tools request automatically, even without a link tag. The 16 and 32 pixel PNGs are the crisp versions modern browsers prefer for tabs and bookmarks. The 48 pixel version is used by Windows and by Google Search results. apple-touch-icon.png at 180 pixels is what iPhones and iPads show when someone adds your site to the home screen; it should have an opaque background because iOS fills transparency with black. The 192 and 512 pixel android-chrome icons are referenced from the manifest and used for home screen shortcuts, install prompts and splash screens. The theme color meta tag tints the browser toolbar on Android to match your brand.

Why it matters

A missing favicon shows a blank globe in the tab and a 404 in your server logs, and it quietly signals that the site is unfinished. A correct set makes the site recognizable in a row of twenty tabs, looks professional when bookmarked or shared, and appears next to your listing in mobile search results where a clear icon can lift click through rate. It also removes the layout shift and console warnings caused by browsers guessing at paths. If you also need to trim a large logo for the page itself, the image resizer will compress it, and the social media preview tool checks the other image that represents your brand when links are shared. Digzy Technology ships a complete icon set like this one with every website we launch.