Guide

How to create a favicon from any image

A favicon is the small icon displayed in browser tabs, bookmarks, and search results. Creating one from an existing image requires specific sizes, formats, and considerations that most image editors do not handle natively.

What files make up a modern favicon set

A complete favicon implementation in 2026 requires several files at different sizes. The classic favicon.ico file should contain 16x16, 32x32, and 48x48 pixel versions. Modern browsers also look for apple-touch-icon.png at 180x180 pixels for iOS home screen bookmarks, and a 192x192 and 512x512 PNG for Android devices and PWA manifests.

The ICO format is unique because it is a container that holds multiple sizes in a single file. The browser selects the most appropriate size from the ICO based on where the icon is being displayed (tab bar, bookmark bar, shortcut). This multi-resolution approach ensures the icon looks crisp at every size.

Additionally, some browsers support SVG favicons, which scale to any size without pixelation. If your icon can be represented as a vector graphic, an SVG favicon provides the sharpest result at all sizes.

Preparing your source image

Start with the highest resolution version of your logo or icon. Ideally, use a square image at least 512x512 pixels. If your source image is not square, you will need to decide whether to crop it or add padding to make it square, since favicons are always square.

Simplify the design for small sizes. A favicon at 16x16 pixels contains only 256 total pixels, which is not enough to render fine details, thin lines, or small text. Many companies use a simplified version of their logo (a single letter, a symbol, or a simplified mark) as their favicon rather than trying to shrink the full logo.

Consider how the icon looks on both light and dark browser themes. An icon with a transparent background looks different on Chrome's white tab bar versus Safari's dark mode tab bar. Testing on both backgrounds helps avoid surprises.

Preparing the PNG sizes with File Studio

File Studio does not create ICO files, but it handles the preparation work locally. Use Crop with the 1:1 preset to make your source square, then use Resize to export the PNG sizes you need: 180x180 for apple-touch-icon.png, 192x192 and 512x512 for Android and PWA icons, plus 16x16, 32x32, and 48x48 for the ICO. If your logo is an SVG, File Studio's SVG export can render it to PNG at each exact size for the sharpest result.

To build the multi-resolution favicon.ico, combine the small PNGs with a dedicated tool. On a Mac with Homebrew, ImageMagick's convert command can do this locally, or use a favicon generator you trust. Then add the HTML link tags for each file to your website's head section.

Because you export each size separately, you can use a slightly different framing at 16x16 (perhaps just a letter) versus 512x512 (the full logo mark).

Favicon formats and sizes in modern web development

The favicon landscape has evolved significantly from the original 16x16 ICO file. Modern websites need favicons in multiple formats and sizes: ICO (for legacy browser tab support, typically 16x16 and 32x32), PNG (for modern browsers, at 32x32, 192x192, and 512x512), SVG (for scalable favicons that work at any size), and Apple Touch Icon (180x180 PNG for iOS home screen bookmarks).

The ICO format is a container that can hold multiple image sizes in a single file. A well-structured favicon.ico contains both a 16x16 and a 32x32 version, allowing the browser to pick the appropriate size. Most browsers use the 32x32 version for high-DPI tabs, falling back to 16x16 on standard displays.

The web app manifest (manifest.json or manifest.webmanifest) references larger icons at 192x192 and 512x512 pixels. These are used when a user adds your website to their phone's home screen or when the site appears in an app switcher. These should be PNG files with the site icon on a transparent or solid-color background.

Designing an effective favicon from an existing image

A favicon at 16x16 pixels is extremely small, so the source image must be simple enough to remain recognizable at that size. Detailed photographs, full logos with text, and complex illustrations do not work well as favicons. The most effective favicons are simple geometric shapes, single letters, or iconic symbols with high contrast.

When starting from a full logo, extract the most recognizable element: the logomark without the wordmark. For example, Apple uses just the apple shape, Google uses the 'G', and Twitter/X uses the bird (or X). If your logo does not have a distinct symbol, use the first letter of your brand name in your brand's primary color.

File Studio does not generate ICO files, but it can produce the PNG sizes you need: crop to a square with the 1:1 preset, then resize to 16x16, 32x32, 180x180, 192x192, and 512x512, or render an SVG logo to PNG at each exact size. Combine the 16x16 and 32x32 PNGs into favicon.ico with a tool such as ImageMagick, then add the HTML link tags to your website's head section.

How to do it with File Studio