Flownauts favicon and web app icon kit
=====================================

Three sets use the existing Flownauts fn path artwork, Teal #08576D and
Ivory #FBF7EE. The regular rounded and full-bleed sets have identical glyph
scale and placement. The separate maskable set uses a smaller glyph.

Choose a set
------------

rounded/
  The regular favicon with transparent outer corners and a teal rounded
  square. Its corner radius is 96 on the 512-unit SVG canvas.
  Use it for browser tabs and places where the authored rounded shape
  should remain visible.

full-bleed/
  The same regular glyph on an opaque teal square, extending to every edge.
  Use it where the host supplies its own corner treatment, including the
  supplied Apple touch icon example. These are regular icons: do not mark
  them as maskable in a web app manifest.

maskable/
  An opaque teal square with a smaller, centered glyph. The glyph fits
  within a circle of radius 200 on the 512-unit canvas, inside the standard
  maskable safe zone (80% diameter; radius 204.8). This leaves room for the
  host's circular or other icon mask. Declare these files with purpose
  "maskable", separately from regular icons. See the MDN reference below.

Files and sizes
---------------

Each regular set contains:
  flownauts-favicon-{rounded|full-bleed}.svg
  flownauts-favicon-{rounded|full-bleed}.ico
  flownauts-favicon-{rounded|full-bleed}-{size}.png

PNG sizes (square pixels): 16, 32, 48, 96, 180, 192, 256, 300, 512, 1024.
Each ICO contains 16, 32, 48 and 256 pixel images.

The maskable set contains:
  flownauts-icon-maskable.svg
  flownauts-icon-maskable-192.png
  flownauts-icon-maskable-512.png

Use 16/32/48 for small favicon contexts; the ICO bundles fallback sizes.
The HTML example uses the 180px full-bleed PNG for an Apple touch icon.
The manifest example supplies 192px and 512px regular and maskable PNGs.
The remaining sizes are convenient exports, not a universal platform
requirements list. Check the actual target when another size is required.

Install the HTML links
----------------------

Copy the link elements from html-snippet.html into the document head.
They provide an ICO fallback, 32px PNG, scalable SVG and Apple touch icon.
The example assumes this directory is deployed at /assets/favicons/.
Adjust every href to the real public URL, especially for sites under a
subpath. Keep any existing application manifest link pointing to that
application's actual manifest.

Merge the manifest icons
------------------------

manifest-icons.json contains only an "icons" member to merge into an
existing web app manifest. It is not a complete application manifest and
does not define application identity, start_url, scope or display mode.
Keep existing entries needed by the application rather than replacing
them without review.

Its src values are relative to this assets/favicons directory. Manifest
icon URLs resolve relative to the deployed manifest URL. If the manifest
lives elsewhere, adapt every src: for example, a root-level manifest can
use /assets/favicons/full-bleed/flownauts-favicon-full-bleed-192.png.
Keep "any" on regular full-bleed files and "maskable" on the separately
padded maskable files. Inspect the deployed manifest and preview the
icons with the target browser/device's masking behavior.

Preserve the artwork
--------------------

Use the supplied direct raster exports at the required size. Do not
stretch, crop, recolor or repeatedly resize a small PNG to make a larger
one. Generate additional sizes from the appropriate SVG. Keep both
regular variants at their shared scale and position; do not enlarge the
maskable glyph to match them.

The SVGs in each variant directory are the export masters. The kit preserves
the original fn path outlines. Review small-size rendering and installed
icon masks after integration.

Official references
-------------------

MDN, Define your app icons: manifest entries, formats and maskable safe zone.
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons

Apple, Configuring Web Applications (archived Safari documentation):
apple-touch-icon links and PNG Web Clip icons.
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

web.dev, Add a web app manifest: icon declarations, 192px/512px raster
coverage and browser manifest inspection.
https://web.dev/articles/add-manifest

References checked 8 October 2026. This kit covers favicon and web app
icon integration; native app asset catalogs have their own requirements.
