How to automate favicon generation in your build pipeline
- Step 1Add the favicon generation script — Create scripts/generate-favicons.js. Read the brand SVG from public/brand.svg, POST to the JAD Favicon Master API with your size and format configuration, and unzip the response into the public/ folder.
- Step 2Hook into the build lifecycle — For Next.js, add to package.json: 'prebuild': 'node scripts/generate-favicons.js'. For Vite, use the vite-plugin-favicon package or a custom buildStart hook that calls the script.
- Step 3Commit the generated files — Commit public/favicon.ico, public/favicon.svg, and public/site.webmanifest to the repository. Generated PNG files can be gitignored and rebuilt on deploy, or committed for reproducibility.
Frequently asked questions
Should I generate favicons at build time or runtime?+
Build time, always. Favicons are static assets that change only when the brand changes. Generating them at request time adds unnecessary latency and complexity. Pregenerate during the build and serve from CDN.
How does Next.js App Router handle favicons natively?+
In Next.js 13+ App Router, place a favicon.ico file in the app/ directory and it is automatically served at /favicon.ico. For SVG favicons, use the metadata icon export in app/layout.tsx: icons: { icon: '/favicon.svg', apple: '/apple-touch-icon.png' }.
Can the pipeline detect when the brand SVG has changed?+
Yes. Hash the brand SVG file and compare it to a cached hash from the last run. If the hashes match, skip generation. If they differ, regenerate. This keeps CI builds fast when the brand hasn't changed.
What if our brand mark is not square?+
The API's padToSquare option adds transparent padding to make the SVG square before rasterizing. You can also set backgroundColor to your brand colour to fill the padding area instead of using transparency.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.