Favicon Sizes for Browser Tabs and Home Screens

A website icon appears in several places: browser tabs, bookmarks, and sometimes an installed app or home-screen shortcut. One image can be resized into multiple assets, but its small versions still need to be readable.

Common icon assets

Small 16×16 and 32×32 images cover common browser-tab uses. Apple touch icons and larger web-app icons serve home-screen and installed-app contexts. Browsers and operating systems choose from the assets you declare, so there is no universal three-file rule that guarantees every device will display the same result.

The Favicon Generator creates an icon package with browser sizes, an Apple touch icon, larger web-app icons, and a manifest. Inspect the downloaded ZIP and follow your framework’s instructions for adding the files and icon links to your site.

Design for the smallest size

A detailed logo may blur when reduced to 16 pixels. Try a simpler mark, strong contrast, and enough padding. Preview the icon at real tab size rather than judging only the large source image.

Test the website on the browsers and devices your audience uses. Clear cached icons when checking a revision; browsers may keep an older favicon for a while. A manifest requests an app display mode, but the browser may use a supported fallback.

Common additional exports include a 180×180 Apple touch icon and a 512×512 web-app icon. Inspect the generated ZIP and manifest, then check the declared asset URLs on target devices.

Frequently Asked Questions (FAQ)

Why does the icon look blurry at 16 pixels? A detailed source may not scale well. Use a simpler mark and inspect it at real tab size.

Does every browser use the same icon file? No. Browsers and operating systems choose from declared assets and supported formats. Test your target devices.

Why is the old icon still visible? Browsers often cache favicons. Verify the new file path, then clear the cache or test a private session.