Favicon Developer Guides for SVG, ICO, PWA and Automation
SVG, ICO, manifests, automated builds, and framework conventions without folklore.
Use this favicon guide cluster in production order
Developer-facing favicon work spans several formats and discovery systems: self-contained SVG, a real multi-frame ICO, explicit raster fallbacks, Apple artwork, ordinary and maskable PWA icons, manifest JSON, shared-head markup, and deterministic build validation.
These references explain the file structures and failure boundaries rather than treating image generation as the end of the task. Use the code examples as a starting point, then validate the exact bytes and public URLs produced by your own build and deployment stack.
Keep formats honest
Match extensions, MIME types, declared dimensions, and decoded contents. Inspect every ICO frame and sanitize SVG instead of trusting the filename.
Automate deterministic outputs
Version the source and generation settings, validate the archive and manifest in CI, and fail releases when expected files or dimensions change unexpectedly.
Publish evidence
Retain build inventories, checker reports, and route-specific examples so a later regression can be compared with a known package rather than a screenshot alone.
Favicon package API for builds and CI
POST one raster source to the versioned endpoint and receive the same documented ZIP used by the browser studio. No API key is required; production automation should still validate every returned file.
curl --fail-with-body \
-X POST https://favicon.now/api/v1/package \
-F [email protected] \
-F name='Example Site' \
-F legacy=false \
-F maskable=true \
-F preset=nextjs \
-o favicon-package.zipconst data = new FormData();
data.append('file', imageFile);
data.append('name', 'Example Site');
data.append('preset', 'vite');
const response = await fetch(
'https://favicon.now/api/v1/package',
{ method: 'POST', body: data }
);
if (!response.ok) throw new Error(await response.text());
const zip = await response.blob();
console.log(response.headers.get('X-Favicon-API-Version'));| Field | Accepted value | Default | What changes |
|---|---|---|---|
file | PNG, JPG, WebP, GIF, or BMP; up to 8 MiB | Required | Applies EXIF orientation and contains the artwork in a 512×512 square. |
name | Site or app name | My Website | Sets human-readable manifest and package documentation labels. |
preset | standard, nextjs, vite, nuxt, sveltekit, angular, django, flask | standard | Adds framework-specific placement and installation files. |
legacy | true or false | false | Adds standalone historical PNG sizes when explicitly needed. |
maskable | true or false | true | Adds separate 192 and 512 pixel adaptive PWA artwork and manifest entries. |
The API does not promise browser selection, search display, permanent uptime, or a fixed throughput allowance. Pin v1, check the response header, reject unexpected archive inventories, and run post-deployment URL checks. Sanitized SVG preservation remains in the browser studio because SVG uses a separate security path.
Start with: Favicon HTML Link Tags: Complete Code Reference
Use explicit icon links, accurate MIME types, a stable manifest URL, and root-relative paths.
Use this foundational guide first, then choose the route below that matches your file format, platform, failure symptom, design constraint, or implementation layer.
Begin with this guide →Favicon HTML Link Tags: Complete Code Reference
Use explicit icon links, accurate MIME types, a stable manifest URL, and root-relative paths.
Apple Touch Icons: Size, Markup, and Cropping
Use a dedicated 180×180 PNG with safe margins for iPhone and iPad home-screen shortcuts.
PWA and Maskable Icons: Designing for Adaptive Shapes
Manifest icons need explicit sizes and purpose values, while maskable artwork needs a protected central safe zone.
SVG Favicons: Crisp Icons, Dark Mode, and Safe Markup
SVG is the flexible modern browser icon—when it is self-contained, simple, and paired with a fallback.
Favicon ICO Format: Inside Multi-Resolution Icon Files
ICO is a container that lets one URL carry several pixel-perfect icon frames.
Favicon API Automation: Deterministic Generation in CI/CD
Make the master asset reproducible, validate outputs, and fail builds when metadata drifts.
Case Study: Replacing Legacy Favicon Files With a Lean Set
A measured comparison of the modern core package and the optional legacy-size export using the same deterministic artwork.
Safari Pinned Tab Icons, SVG Masks and Touch Icons
Separate Safari pinned-tab SVG masks from normal favicons and Apple touch icons, then test monochrome artwork, color metadata, paths and fallbacks.
Favicon MIME Types for ICO, SVG, PNG and Manifests
Map favicon extensions to correct HTTP Content-Type values, identify HTML rewrites and nosniff failures, and verify every deployed icon response.
Favicon Security: SVG Uploads, SSRF and Tracking
Secure favicon generators and checkers by sanitizing SVG, decoding untrusted images safely, blocking private-network fetches, and limiting tracking abuse.
Favicon Developer Guides questions
Use these answers to choose the correct guide or tool before changing production files.
Can ICO contain SVG artwork?+
No. ICO is a raster container. Keep favicon.svg as a separate scalable candidate and inspect the raster frames embedded in favicon.ico.
Should manifest icons use purpose any maskable?+
Separate ordinary and maskable compositions are easier to optimize and validate because adaptive crops need full-bleed artwork and a protected center.
What belongs in a favicon CI check?+
Validate source safety, output inventory, dimensions, ICO frames, manifest syntax and purposes, public response types, and rendered head declarations.
From favicon idea to verified deployment
Follow one clear path through creation, inspection, installation, and troubleshooting.