Fieldnote
A favicon set for one SVG symbol
Fieldnote is a fictional outdoor notebook brand used in SVG AI examples. This page loads the icon files below. Look at its browser tab, then switch your browser to dark mode or open the page in a private window.
Files in this set
| Preview | File | Pixels | Used for |
|---|---|---|---|
| icon.svg | scalable | Browser tabs in browsers that support SVG icons; turns white when the browser prefers a dark color scheme |
| favicon.ico | 32 × 32 | Fallback for software that does not use the SVG icon | |
 | apple-touch-icon.png | 180 × 180 | iPhone and iPad home-screen shortcuts (full square, no transparency) |
 | icon-192.png | 192 × 192 | Web app manifest |
 | icon-512.png | 512 × 512 | Web app manifest |
 | icon-maskable-512.png | 512 × 512 | Web app manifest, purpose: "maskable"; the bookmark stays inside the central safe circle |
| manifest. | Lists the three manifest icons and the standalone display mode |
The head tags
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">This page uses the same four tags with relative paths, so it also works from this subfolder.
Compare the tab icon designs
Open these three pages in tabs next to each other: adaptive only, adaptive with a white edge (the version used in this set) and white tile.