Favicon Tutorials
The exact files, in the exact folders, for the stack you're actually using.
Most favicon instructions are written for a generic static site and then quietly break the moment a build step is involved — a framework hashes your filenames, a CMS rewrites your <head>, or a host serves the wrong content type. These walkthroughs are framework-specific for that reason: where the files go, which conventions the framework handles for you, which tags you still have to write yourself, and how to verify the result rather than assume it. Every one of them ends at a working icon in a real browser tab.
Changing the Favicon on Webflow, Squarespace, Wix and Ghost
Where the favicon setting hides in each platform, what size each one wants, and how to add the icons the built-in uploader doesn't cover.
6 min read
ReadTutorialHow to Add a Favicon to a Vue or Nuxt App (The Right Way)
Where favicon files go in a Vite-powered Vue project and in Nuxt, how to declare them without fighting the build, and why the default Vite favicon keeps coming back.
6 min read
ReadDesignDark Mode Favicons: How to Make One Icon Work on Both Themes
How to build a favicon that adapts to light and dark browser themes using an SVG media query — and why the safer answer is usually an icon that never needs to.
7 min read
ReadTutorialAdding a Favicon in Astro and SvelteKit
The static directory, the layout file and the head tags for both frameworks — plus the base-path and adapter gotchas that break favicons on deploy.
5 min read
ReadTutorialHow to Add a Favicon in WordPress Without a Plugin
WordPress calls it a "site icon" — here's how to set one properly, with or without the block editor.
4 min read
ReadFundamentalsThe Web App Manifest, Explained: Icons, Theme Color and PWA Installs
What site.webmanifest actually does, which fields matter for icons, and how to get it right.
5 min read
ReadTutorialHow to Set a Favicon on Shopify (Theme Editor Guide)
Where Shopify hides the favicon setting, what size to upload, and how to confirm it's live.
4 min read
ReadTutorialHow to Add a Favicon to a React App (Vite and Create React App)
Where favicon files actually live in a Vite or CRA project, and how to wire up every size correctly.
4 min read
ReadTutorialHow to Add a Favicon to a Next.js App (App Router)
The exact files and folder structure Next.js's App Router expects for a favicon, step by step.
5 min read
ReadTutorialHow to Add a Favicon to a Static HTML Site
The exact <link> tags a plain HTML site needs in <head>, explained line by line.
5 min read
Read