How to customize your React tab icon and attachment for newbies by a newbie.

blackwellsmith

blackwellsmith

Posted on May 31, 2020

How to customize your React tab icon and attachment for newbies by a newbie.

Recently I posted my resume on a Slack channel for a peer review. One fellow developer had somethings to say about my portfolio website. As this was an opportunity to learn from someone with way more experience, I dove in and waited for his input on what he would do differently. First off having "here" highlighted as my link was practically unforgivable. Easy enough done. Get some space between the title and the navbar everything was to cozy. Done. Run my portfolio on Netlify and get a proper domain. Done.

The final suggestion wasn't very difficult but I couldn't figure it out easily. Change the favicon.ico for my tab and attachment should describe what the site is about. It shouldn't say React app, that is a no no. It should say my name and portfolio.

Starting with the favicon.ico file, the react atom had to go. That file was deleted. I found a key with a 'B' on it, looks fun. Downloaded a ico file from a free site and created a new favicon.ico file with the new icon.

Next I needed to change the text on the attachment. This should be simple and it is. For some reason my Google Fu wasn't treating me well so I started looking around in the code. The answer was in there. Just had to find "Web site created using create-react-app" in the code somewhere and replace it. Eventually I found it in a meta tag on line 9 of the index.html file. This was also the place where favicon.ico was referenced. I was in the right place, figuring out how to make the last change was pretty easy.

In the manifest.json file under "short_name" object it said "React App". I deleted my previous build file. Replaced "React App" with my name and started my production build. Pushed it to github and deployed. My attachment was looking proper.

The head tag of your index.html seems to be the sweet spot for your attachment. You can change the color in a meta tag. I am not sure of what else you can do here. Surely you are only limited by your imagination and determination. This is what I have for now...

💖 💪 🙅 🚩
blackwellsmith
blackwellsmith

Posted on May 31, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related