How to create a favicon.

Open Favicon / ICO Generator and choose Image. Upload a PNG, JPG, JPEG, WebP or GIF, or select Try a sample. The worked example uses favicon-orbit.png, a 512 × 512 pixel violet orbit mark with transparent corners. The input is 202,491 bytes.

For a brand without a finished logo, select Text on the tool page. Enter one or two letters and choose Continue. The editor offers Modern sans, Classic serif and Monospace fonts, plus separate text and background colors. Up to three characters are accepted, but extra characters can become difficult to recognize at small sizes.

Keep the original artwork. The generator creates new icon files and does not overwrite the source. GIF input becomes a still icon rather than an animated favicon.

For a monogram, the Font menu starts with three included styles. Select Use system fonts on a supported desktop browser and allow access to add the fonts installed on your device. Use the previous and next chevrons to compare adjacent fonts, or pick a family and inspect the live preview, especially at 16 pixels. Fonts stay on your device; the included styles work without permission.

The editor displays light and dark browser tabs plus previews at common icon sizes. Check the 16-pixel example first; it is the strictest test of whether the mark remains recognizable. The Apple Touch preview represents a 180-pixel export and is displayed smaller in the workspace.

On a phone, open Settings. Leave Create from set to Uploaded image and Image fit set to Show the whole image. For this sample, set Space around content to 0 and enable Transparent background. The source already contains its own rounded violet shape and clear margins, so it does not need an additional colored background.

With a different source, Show the whole image keeps its edges, while Fill the icon may crop them. Rounded square, Square and Circle define the outer shape. Transparent background preserves clear areas but cannot remove an opaque background already drawn into a photo. Review the smallest preview after every framing change.

Under Download, choose Website icon package (ZIP) for this example. Leave Website name at My website for the sample, or replace it with the real brand name for your own project. This name is used in site.webmanifest; it is not added as text over the image.

Select Start. The browser generates a seven-frame favicon.ico with square images at 16, 24, 32, 48, 64, 128 and 256 pixels. It also creates PNG icons at 16, 32, 48, 180, 192 and 512 pixels, a manifest and installation instructions. The result is one ZIP rather than a separate download button for every icon.

If you only need a classic favicon.ico, choose Multi-size ICO instead. This is useful when a website platform accepts an ICO upload and does not need a separate package.

Download saves website-icons.zip. The actual worked example contains nine files and is 304,351 bytes. The comparison above shows the 512-pixel source beside the genuine 256-pixel frame extracted from the exported ICO, rather than a simulated browser screenshot.

Extract the ZIP, upload the icon files to your website root and read INSTALL.txt. It includes HTML link tags for the ICO, PNG icon, Apple Touch icon and web manifest. If you place the files in a subfolder, update both the HTML paths and the icon paths inside site.webmanifest.

Check your site in a fresh browser tab and on the devices you care about. Browsers can cache favicons, so an old icon does not immediately prove the installation failed. Keep the source image and downloaded package before refreshing the editor, because a refresh returns to the main tool page.