Favicons per framework
Every framework treats static assets a little differently. The file layout, the head API, and the gotchas matter for Next.js App Router, Astro, SvelteKit, React (Vite, CRA, manual), and Vue / Nuxt — five framework-specific install guides for the modern favicon set.
Each guide assumes the files Faviconry generates: favicon.svg,
multi-resolution favicon.ico, an Apple touch icon, the two
PWA manifest icons, and site.webmanifest. Pick your stack,
copy the snippet, ship.
- Next.js Favicons in Next.js — the modern App Router setup How to ship a complete modern favicon set in a Next.js App Router project. Where files go, which metadata API to use, and the specific gotchas of the /app directory.
- Astro Favicons in Astro — the public folder pattern Every Astro site ships favicons the same way: drop files in /public, link them from a BaseLayout. This guide is the modern five-file setup for Astro projects.
- SvelteKit Favicons in SvelteKit — static folder and app.html SvelteKit's favicon setup lives in two places: /static for the files and src/app.html for the link tags. Here is the current recommended configuration.
- React Favicons in React — Vite, Create React App, and everything else React itself has no favicon convention. Your bundler does. This guide covers the modern setup for Vite-powered React, Create React App, and framework-less setups.
- Vue / Nuxt Favicons in Vue and Nuxt — the public folder and head config Vue with Vite uses /public for favicons and index.html for link tags. Nuxt 3 adds app.head config for declarative setup. This guide covers both.