Replace favicon.ico

Creating the icon

Next, we’re going to create a favicon icon for the Lang-Man application. The favicon icon is a tiny image used to represent our web page. Firefox and Chrome display favicon icons in their tabs next to the page titles. For Lang-man, we’ll use the gallows. To do this, we’ve taken a screenshot that looks like what we want,dropped it into a favicon generation site, and grabbed the output files. The output was a zip file containing seven files. Of these, the React application uses favicon.ico for websites, logo192.png for iPhones, iPods, and iPads.

Note: We had to rename apple-touch-icon.png to logo192.png.

Replacing the icon

These two files need to be copied into Langman/client/public, overwriting the same name files. We’ve used https://favicon.io, but favicon-generator.org and favicomatc.com also look good.

Not showing up?

When we first do this, it’s likely the favicon will not show up. This is because browsers are aggressive with caching favicons, which makes sense. After all, they rarely change. To see it, you’ll need to clear your browser’s cache and reload the page.