Every favicon guide gives you the same list of files. I built the set from a real 716-byte logo to see the sizes, and found the one check most guides skip.

TL;DR: a square favicon.svg (with dark mode inside it), a favicon.ico with 16, 32 and 48 px images, a 180 px apple-touch-icon.png , two Android PNGs in a manifest, and four lines in <head> . Then look at it at 16 px.

The files, measured

File What uses it Bytes

favicon.svg Modern browsers, any size, dark mode 568 (377 gzipped)

favicon.ico Old browsers, tools that request /favicon.ico 2,574

apple-touch-icon.png iPhone and iPad home screen, 180 x 180 5,171

icon-192.png + icon-512.png Android home screen, via the manifest 20,196

1. Make the viewBox square

The logo had a 768 x 896 viewBox. Fitted to the drawing in the SVG Lab editor, the artboard came out 678 x 806. A favicon slot is square, so I set the viewBox to an 860 x 860 square around the mark and dropped the background rectangle.

2.…