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.