Replace favicon.ico
Learn how to replace the favicon.ico file.
We'll cover the following
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
tologo192.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.
Get hands-on with 1200+ tech skills courses.