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.

Generating favicon files with File Studio

File Studio can generate a complete set of favicon files from a single source image. Drop your logo or icon into the app, select the favicon generation mode, and File Studio creates all the required sizes and formats in one operation.

The app uses high-quality downscaling algorithms optimized for small sizes, which matters a lot at 16x16 pixels where every pixel counts. It also generates the HTML link tags you need to add to your website's head section.

For advanced use cases, you can adjust the crop and padding for each size independently. This lets you show 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's favicon generator takes your source image and produces all required sizes at once: 16x16 ICO, 32x32 ICO, 180x180 Apple Touch Icon, 192x192 PNG, and 512x512 PNG. It also generates the necessary HTML link tags for your website's head section, ready to copy and paste.

How to do it with File Studio