Changing Title Dynamically & Adding Favicons in React JS
When you create a React application using Create React App, you may notice:
Default Tab Title → React App
Default Favicon → React Logo ⚛️
But in real-world applications like Text Utility App or News App 📰, this looks unprofessional.
A well-designed application always includes proper branding and dynamic control.
In this tutorial, we will learn:
How to change the website title
How to add a custom favicon
How to update the title dynamically using JavaScript
Best tools to generate favicons
Step 1: Update Title & Meta Tags
Go to your public/index.html file and update the title and meta description.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="The Royal Text"
content="From The Royal Text you can convert your Text as you want like LowerCase, UpperCase, Copy to Clipboard and Remove Extra Spaces etc...."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous">
<title>The Royal Text</title>
</head>
Step 2: Add Custom Favicon
To add your own favicon:
1. Create or download favicon (.ico or .png)
2. Place it inside public folder
3. Update this line:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
You can replace favicon.ico with your custom icon name.
Best Websites to Generate Favicon 🔥
You can easily create favicon using these tools:
Step 3: Change Title Dynamically
To change the title dynamically for different pages, use JavaScript inside your components.
useEffect(() => {
document.title = "Home - The Royal Text";
}, []);
Example for multiple pages:
useEffect(() => {
document.title = "About - The Royal Text";
}, []);
Advanced: Change Title Dynamically on Events 🔥
You can also update the title based on user actions like dark mode.
if (mode === "dark") {
document.title = "Royal Text | Dark Mode Enabled";
} else {
document.title = "Royal Text | Light Mode Enabled";
}
Features and Changes in Above Code:-
Updated default React title to custom website name.
Added meta description for better SEO.
Integrated Bootstrap for styling.
Added custom favicon for branding.
Used useEffect hook to dynamically update page title.
Improved user experience with dynamic tab updates.
Learned how to use external tools for favicon creation.