FIELDNOTE FAVICON SET: EXAMPLE FILES

Fieldnote is a fictional outdoor notebook brand used in SVG AI examples.

FILES
  index.html               The example page. Its head loads the four icon tags shown on the page.
  icon.svg                 Tab icon: navy bookmark with a thin white edge. When the browser prefers a
                           dark color scheme, an embedded CSS rule turns the bookmark white.
  favicon.ico              32 x 32 fallback (one image, 929 bytes).
  apple-touch-icon.png     180 x 180 opaque navy square for iPhone and iPad home-screen shortcuts.
  icon-192.png             192 x 192 rounded navy tile, listed in the manifest.
  icon-512.png             512 x 512 rounded navy tile, listed in the manifest.
  icon-maskable-512.png    512 x 512 opaque navy square, listed with purpose "maskable". The bookmark
                           stays inside the central safe circle (radius 40% of the icon width).
  manifest.webmanifest     Lists the three manifest icons and the standalone display mode. Its start_url
                           is index.html, so an installed copy of the example opens index.html.
  comparison/              Three pages that each load one tab icon design: adaptive only, adaptive with
                           a white edge (the design used in this set) and a white tile.
  screenshots/             Browser captures of the example and of the three comparison designs.
  sources/                 The untouched SVG AI generation, the two published Fieldnote variants used
                           here, the SVG source for each PNG, the 32 px PNG used for the ICO, and
                           make_ico.py.

HOW EACH FILE WAS MADE
  1. Symbol: generated in the SVG AI dashboard on September 14, 2026 (Classic, one SVG, transparent
     background; displayed cost two credits). sources/fieldnote-original.svg is the untouched download.
  2. Published manual variants reused here: fieldnote-manual-brand.svg (exact #18345F and #F97316
     colors) and fieldnote-no-center.svg (center detail removed for small sizes).
  3. icon.svg: the path data of fieldnote-no-center.svg is unchanged. Added: a square viewBox
     (426 -34 1200 1200), a class on the bookmark path, a white 64-unit stroke painted under the navy
     fill, and a prefers-color-scheme: dark rule that makes the bookmark white without the stroke.
  4. sources/apple-touch-icon.svg, icon-192-512.svg and icon-maskable.svg: the full mark with its navy
     fills set to white (as in the published light Fieldnote variant) on a navy background. Measured in
     the exported PNGs, the bookmark is about 64% of the icon's height in the touch icon and the rounded
     tiles, and about 57% in the maskable icon, where its farthest pixel is 33% of the icon width from
     the center (the safe circle's radius is 40%).
  5. PNG files: exported with the svgai.org SVG to PNG converter
     (https://www.svgai.org/convert/svg-to-png) on October 12, 2026, with width and height both set to
     the final size:
       apple-touch-icon.png    from sources/apple-touch-icon.svg at 180 x 180
       icon-192.png            from sources/icon-192-512.svg at 192 x 192
       icon-512.png            from sources/icon-192-512.svg at 512 x 512
       icon-maskable-512.png   from sources/icon-maskable.svg at 512 x 512
       sources/favicon-32.png  from icon.svg at 32 x 32, with the browser in light mode
     The converter draws an SVG with the browser's color scheme. Exporting icon.svg while the browser
     prefers dark mode bakes the white bookmark into the PNG, which is nearly invisible on light
     backgrounds. Export it in light mode, or from a copy of icon.svg without the dark-mode rule.
  6. favicon.ico: packed from sources/favicon-32.png with Pillow 11.3.0. From this folder:
       pip install Pillow
       python sources/make_ico.py favicon.ico sources/favicon-32.png
  7. manifest.webmanifest, the head tags and the example and comparison pages were written by an AI
     coding agent.
  Steps 3 to 7, the browser checks and this README were done by an AI coding agent (Claude). Only the
  symbol was generated by SVG AI.

WHAT WAS TESTED (Windows 11)
  Chrome 154.0.8037.99 and Edge 155.0.4283.45, October 13, 2026, each in a new browser profile (not a
  private window), on a test page with only the four head tags and no images:
  - In the first 3 seconds, before any DevTools command, both browsers requested icon.svg,
    manifest.webmanifest and icon-192.png. Neither requested favicon.ico, apple-touch-icon.png or the
    512-pixel icons.
  - The DevTools Protocol reported no manifest parse errors (Page.getAppManifest) and no installability
    errors (Page.getInstallabilityErrors) in either browser.
  Tab captures in screenshots/ (October 13, 2026), each in a new throwaway profile: Chrome default,
  Chrome with the --force-dark-mode flag, a Chrome incognito window, an Edge InPrivate window, and an
  Edge InPrivate window with --force-dark-mode. The example-*.png page captures were taken in headless
  Chrome at 1280 and 390 pixels wide, with the light and the dark color scheme.
  Not tested: Safari, Firefox, iPhone or iPad home screens, Android home screens.

USING THE FILES ON YOUR SITE
  Put the files in the site root and use root paths (/favicon.ico, /icon.svg, /apple-touch-icon.png,
  /manifest.webmanifest). Browsers may also request /favicon.ico from the site root when a page has no
  icon tag. The example page uses relative paths only so that it also works inside this folder.
  In manifest.webmanifest, change "start_url" to "./" (or "/") so that an installed app opens your
  home page.