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:
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:
- Favicon.io (Most popular)
- Real Favicon Generator
- Canva (Design + Download)
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";
}