Favicons are special small icons that are used on websites and social media. They help visitors recognize a website quickly more easily. Without the favicon, it might take a long time for someone to recognize you. I find that they are extremely helpful in representing your brand within your website. I used a tool called

which generates favicons for you. The steps are pretty basic all you have to do, is in the text field type what you want your favicon to say. Then choose the background color and font size. Once you got that set, click download. Then follow the Installation process.

Which entails using these links and putting it on your HTML document and placing the pictures of the favicons in the directory of your website. The mistake I made was putting

favicon-32x32.png file in website directory and added one link.

Thinking it would work, instead I needed finish setting up the favicon. My co-worker alerted me letting me know it wasn't displaying properly. Even though the configuration is pretty straightforward, I missed some steps because this was my first time creating a favicon. It worked on the local computer, but not on the World Wide Web. I decided to go back to the favicon generator website and read the instructions again. I realized that I needed to include all the links as well as the files from the favicon in order for it to work, not just one file.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest

Then everything worked perfectly. So the lesson I learn is sometimes you have to be more precise and look at all the details. To make sure your not missing anything. With all that said. I truly believe the benefits of collaborating, are people can identify problems for you that you may overlook. So it’s good to have a new eyes looking at your projects.

And here you have it! my experience with Favicons. Through this journey so far I can already tell there are going to be tons of ups and downs going forward as I get used to blogging and creating my own posts, but for now all I can do is tell you what I've learned from this experience. I hope it helps you if you decide to follow a similar path in the future Thank you!