Logos in React
Howdy coders. Today I’m gonna rap at you about logos in your React App. What do I mean when I say ‘logo’? I’m referring to the icons that people see in browser tabs, when you put the link in a message or e-mail, and when a user saves your webpage to their home screen. There are probably other places they can be found, but these are the ones that come up on a regular basis. Check out these examples:
First, let’s talk about creating those nifty icons, and then I’ll explain where to plop them in your code. If you don’t have an image editor, skip to the next paragraph! If you do have a sweet image editor/creator like Adobe Photoshop or Illustrator you can whip up any cool image you like, and then save the different PNG sizes you need. It is important to remember that these images are usually viewed as a favicon which is 16px x 16px (tiny) so it needs to look sharp even if it’s small. At this stage you can go ahead and save a 512px and 192px PNG file, but what about that ICO extension? I haven’t used photoshop to create one of these, but from a quick google it doesn’t seem that it is built in, so while installing a new extension is relatively easy, I know something that is even easier…
Enter Favicon.io! This excellent website converts any image you like and gives you all of the logo formats generally needed for any project (not just react). It will even convert a jpg or gif file! Even cooler than that, if you don’t have an image, or just want to create a simple, sharp logo (like mine) it has a mini text editor with a boatload of font, color, font size and border rounding options. Simply make a few choices, type in a few letters, and BAM, you have a logo! It will even convert Emojis! The website couldn’t be easier to use, and doesn’t even make you create an account (WOW).
Ok, so now we have our cool logo, and a logo folder with a few different sized logos and a couple different formats. What now? When you ran the create-react-app command you know a bunch of folders and files were created and you have probably spent the majority of your time in the src folder. What’s in the public folder? Exactly what we are looking for!
At this point add your .ico file, and the 192 and 512 sized png files to the public folder, and delete the old files. Now, if you take a look at index.html, you’ll notice some familiar looking files being referred to in the head. Most notably favicon.ico and logo192.jpg. Change these to whatever you named the files you just imported.
But wait, what is the logo512.png file for? Have a look at the manifest.json file and you will find it. The manifest.json file specifies meta data for your web app, very similar to how the head of your html file specifies meta data when your app is viewed as a web site. All you need to change is the file names. Lazy tip: before you import the files in to the public folder, rename to the existing file names, then delete the files that came with create-react-app before adding them. Now you don’t need to change anything in index.html or manifest.json.
And that’s it! Enjoy your cool new custom logo. Happy coding!