React Favicon: Add and Dynamically Update Your App Icon

June 27, 2026 · 3 min read

React apps need favicons just like any other website. Here is how to set them up correctly in the three most common React frameworks.

Create React App

Replace public/favicon.ico and public/logo192.png and public/logo512.png with your generated files. Update manifest.json to reference the new icons.

Next.js

Place favicon files in the app/ directory. Next.js automatically serves them. Use the Metadata API for dynamic favicon updates.

Dynamic Updates

Change the favicon at runtime for notifications: document.querySelector('link[rel="icon"]').href = '/new-favicon.png'. Generate all sizes first with genfavicon.org.

Written by David Kim — Frontend Developer. More about me →