Personalize Your Web App with a Favicon, Completely Free of Cost!
Represent your project using a unique icon, and stand out from the crowd.
It has recently been a complete revelation to me that being a good developer is only half the battle won, if you want your project to stand out from the rest. What matters at the end of your endeavor to build a few personal projects to add to your ever-growing portfolio, is that the project must be presentable. By this I mean that your work should seem polished, and the most basic of things, can actually go a long way in terms of elevating the project you build.
This is where favicons come into the picture. They are essentially the logo that represents your project in a browser’s address bar, or the logo that a user sees when the app is installed on a device (assuming that it’s a Progressive Web Application i.e, a PWA). In this piece, I will list a set of resources that can help you feel the same ecstasy that I felt, when I accidentally stumbled upon the fact that a simple icon can actually improve the presentability of your web application.
Before we begin, it is of paramount importance that the icon that you choose, actually represents what your project is about. This may sound trivial, but it is something that needs to be kept at the back of one’s mind when choosing from a vast list of icon options, because if the icon you choose doesn’t end up as an honest representation of your work, then the favicon shall serve very little purpose.
Okay, let’s dive in!
First of all, head over to favicon.io and see what type of an icon will suit your project the most. This can include an existing emoji, as an example let’s assume that you’re building a really simple weather application, in this case it makes sense to have either the Sun, or the clouds as the favicon, so it’s easy to choose the respective emoji and call it quits, as it makes the entire process ever so simple. If not an emoticon, then maybe you want a simple text-based icon, like that of Medium or dev.to, because it’s relatively simple to customize a text-based icon when compared to an image-based icon. If you are content with either of these cases, then just follow the steps in the next section, and your work’s done!
Once you choose an emoji or finish adding the text, download the various files generated and follow these instructions:
- Place those files in the root of your project, which is usually the public directory or the folder which contains your index.html file (i.e. in the main html file of your application)
- Add the following link tags to the head of your index.html file, which allows the browser set a new favicon for your project.
<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">Once you do this, your job’s done! It’s that simple. Reload the window, and see the browser tab indicate the icon you just added.
Personally, I would recommend that you go ahead and choose the third option (technically speaking, the first option) of converting a .png file to an icon. But fret not, I will present a complementary free resource that makes this task quite simple. Just in case you choose to create your own icon using a tool like Adobe XD, you can do so, but make sure to export it as a png file. In this case, you can just skip the next part, and upload your file to favicon.io, and after you download the files that are generated, just follow the steps mentioned in the previous section.
But you can skip designing the icon yourself, and just choose from an already existing library of icons from flaticon.com and even customize an icon you like, to better represent the colour palette of your project! Make sure to attribute the designer once you download your icon, since they have basically done all the hard work for you. Be sure to download your icon in the .png format, for it to be compatible with favicon.io
Repeat the process I mentioned earlier, to convert the file into a favicon, and if you feel like the icon needs some tweaking, just repeat the entire process within a couple of minutes, until the icon is just the way you want it to be!
For example, below is the icon I chose to add as the favicon for a blogging application that I built. It’s clearly not the most eye-catching, but just about gets the idea of the app across.
Of course, these are not the only tools that you can use in order to set up your very own favicon, there are other free resources out there, that do provide very similar functionalities, and you will eventually stumble upon them! So if there’s one takeaway from this post, let it be the fact that there are many ways to get to the same outcome, and it’s only a matter of personal preference, so try finding innovative solutions to any problem at hand, and keep sharing your findings!
