Favicons by Platform

Next.js resolves icons from files rather than from link tags you write by hand. Put the right filename in the right directory and the framework emits the markup for you.

React never touches the document head. Your icon links go in the HTML shell, and which file that is depends on whether the project was scaffolded with Create React App or with Vite.

A Vue single-file component cannot render a link tag into the head. The icons are declared in index.html, which lives at the project root under Vite and inside public/ under Vue CLI.

Angular copies static files only if the build configuration tells it to. A file that isn't matched by the assets entry in angular.json never reaches dist/, no matter where you put it in the project.

SvelteKit copies everything in static/ to the root of the build, and the document shell is src/app.html rather than a component. Icon tags belong there so they are in the served HTML before any JavaScript runs.

Nuxt injects a link to /favicon.ico into every page by default, so a new project logs a 404 for it until you drop a file into public/. The remaining icons are declared in the app.head block of nuxt.config.

Vite is unusual in treating index.html as source code rather than as a static asset: it sits at the project root and is rewritten at build time. Everything in public/ is copied to the output root untouched.

Astro processes and fingerprints assets imported from src/, and copies public/ to the build output exactly as it found it. Icons need stable filenames, so they go in public/ and are linked from a layout.

Gatsby is the one stack here that generates the icon set for you. gatsby-plugin-manifest takes a single source image named in gatsby-config.js and produces the sizes, the web app manifest, and the link tags at build time.

Hugo copies static/ to the root of the published site, but the head markup belongs to whichever theme you installed. The trick is overriding the theme's partial from your own project instead of editing files under themes/.

WordPress does not want a folder of icon files. You upload one square image as the Site Icon, and core crops it into the sizes it serves and prints the link tags into every page.

On Shopify the favicon is a theme setting backed by the image CDN, not a file you put on a server. The theme decides which tags get rendered, and most themes render exactly one.

Squarespace calls the favicon a browser icon, and it is one square image uploaded in the site's settings. There is no file system and no template to edit, so that single upload is most of what you get.

Wix ties the custom favicon to a paid plan with a connected domain — a site still on a wix.com subdomain shows Wix's own icon no matter what you upload. There is no file system and no head to edit.