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:
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:
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:
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 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:
Good work!