Changing the Default React Browser Tab Title and Icon

This is a quick post that covers the important but easy-to-miss detail of your React app’s browser tab. By default it will look like the following:

Default React browser tab has the React logo along with the text “React App”
That’s not our app!

Small overlooked details like this can adversely affect the overall impression of a website. Fortunately, this is an easy fix.

First, locate the default document (usually this will be index.html) and find the following code at the bottom of the <head> element:

The default document includes two link elements and a title element to dictate browser tab content
The default document includes two link elements and a title element to dictate browser tab content
What we’re looking for is in the default document

Let’s start with the simplest aspect which is the <title> element at the bottom. That text should look pretty familiar —replace this with the name of your app/website and React’s hot reloading should mean you see the updated title almost immediately in the browser tab:

Successfully customized browser tab title
Successfully customized browser tab title
Halfway there!

Nice! Now to change the default React icon. You can see that the first of the two links is pointing to a favicon.ico file within our public folder — this relates to the Apple touch icon, or the app symbol that appears on Apple’s mobile and tablet devices. We’re not going to worry about this.

The second link is pointing to a manifest.json file, also in the public folder, which the included React comments explain help provide metadata when installing our app. Investigating this manifest.json file shows us that our metadata comes in the form of an object, and that the "icons" key in turn points to an array of objects.

The manifest.json file, which includes important metadata about our app
The manifest.json file, which includes important metadata about our app
Look at that beautiful metadata

The first object in this array has an "src" of "favicon.ico". Favicon is a shortening of favorite icon, the name for the little icon in Google Chrome’s browser tabs. We can further confirm that this is what we’re looking for because the "sizes" key includes a value of 16x16 — the size in pixels of favorite icons.

So, now that we have our target it’s just a simple matter of deleting the default favicon.ico file found in our public folder and copying over our desired asset to act as our new icon. Be sure to rename your new file favicon.ico. Now, you should be able to fully customize your browser tab to better reflect your site’s theme:

Successfully customized both the favorite icon and the title of the browser tab
Successfully customized both the favorite icon and the title of the browser tab
Woohoo! Such power

Good work!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store