What a favicon set needs to contain
A favicon is no longer a single file. Browsers request a small icon for the tab, iOS asks for an apple-touch-icon when a page is saved to the home screen, Android and installable web apps read icons out of a web app manifest, and search result surfaces and bookmark listings pick whatever they can find. Supplying one 16 x 16 image leaves most of those surfaces scaling something inappropriate.
The practical answer is a small set of PNG files at fixed sizes plus a manifest that points at the large ones. This tool generates PNGs at 16, 32, 48, 64, 128, 180, 192 and 512 pixels. The 180 pixel file is named apple-touch-icon.png, the 192 and 512 pixel files are named android-chrome-192x192.png and android-chrome-512x512.png, and the rest follow the favicon-NNxNN.png pattern.
Everything arrives as a single ZIP named favicons.zip, together with a site.webmanifest and an html-snippet.html containing the link tags to paste into your head element.
Text mode and image mode
Text mode draws a lettermark. You supply up to four characters, though only the first two are rendered, and you choose a background color, a text color, one of a small set of font stacks, and whether the square has rounded corners. The glyphs are drawn at 55 percent of the icon size and centered, so a two letter monogram fills the tile without crowding the edges. This mode is well suited to a project that has no logo yet, because a high contrast monogram stays legible at 16 pixels where a detailed mark does not.
Image mode takes a PNG or JPG you upload and fits it inside the square without cropping, which means a wide logo will sit in a letterboxed tile with transparent space above and below. If you want your artwork to fill the whole icon, crop it to a square before uploading. The rounded corner option applies in both modes and clips the corners of whatever is drawn.
A 256 pixel preview updates live as you change any setting, so you can judge the design before generating. It is worth zooming your browser out or looking at the small preview tabs in your own browser afterwards, because a mark that reads well at 256 pixels can turn into a smudge at 16.
The favicon.ico caveat
The ZIP contains a file named favicon.ico, and it is honest to state exactly what that file is. It is a 32 x 32 PNG image saved under the .ico filename. It is not a true multi-resolution ICO container with the classic ICONDIR header that Windows and older browsers expect.
In practice current browsers sniff image content rather than trusting the extension, so a PNG served at /favicon.ico is generally displayed correctly. Where it can matter is in older software, Windows shell integrations, and any pipeline that parses the ICO structure rather than decoding the image. If you need a genuine multi-size ICO, build one with a dedicated ICO packer and replace this file.
The file exists because browsers still probe /favicon.ico at the site root when no link tag matches, and an empty 404 there is a wasted request and a missing icon in some contexts.
A worked example: deploying the ZIP
Suppose you generate a rounded indigo tile with the initials EA. The ZIP contains eight PNGs, favicon.ico, site.webmanifest and html-snippet.html. Extract all of them into the public root of your site, so that they resolve at /favicon-32x32.png, /apple-touch-icon.png and so on. The link tags in the snippet use root-relative paths, so serving the files from a subdirectory means editing those paths.
Paste the contents of html-snippet.html into the head element of your layout template. It declares the 16, 32 and 48 pixel icons, the apple-touch-icon, the two Android sizes, and the manifest. Then open the manifest and edit it, because the generated file uses the placeholder values My Site and Site for name and short_name. The theme_color and background_color are set from the background color you picked, and display is set to standalone.
Browsers cache favicons aggressively. After deploying, a hard reload may not be enough to see the change on a page you have visited before, and opening the icon URL directly is the quickest way to confirm the new file is being served.
Design choices that survive at 16 pixels
At 16 x 16 you have 256 pixels to work with, and the browser renders the tile next to a page title in a busy strip of tabs. Contrast between the mark and the background matters more than detail, and detail that is not legible costs nothing but adds noise. One or two bold letterforms, a single simple silhouette, or a solid color field with a distinctive shape all survive; a wordmark, a thin outline and a gradient with subtle tonal shifts do not.
Consider how the icon sits on both light and dark browser chrome. A tile with a solid background works everywhere. Artwork with a transparent background can disappear into a dark tab strip if the mark itself is dark, which is a common failure with logos exported for print use.
Everything here is drawn with the browser canvas in your own page, so no image or logo you upload leaves the device, and there is no account, watermark or upload step involved.