The favicon is, perhaps, one of the most neglected web element by most students learning how to design/develop websites. I guess the first thing we need to do is define what a favicon is. When there is no favicon all we see on the browser tab is a file icon.
What is a favicon?
In simple terms it is that tiny icon you see on the tab of your browser when you visit a website. It is the logo of your site but in a very small format. Here on my site it looks like this. See how tiny it is? But how do we make such a tiny image?
What is the file extension of a favicon?
How do we make/create a favicon?
There are many online apps available that you could use to make a favicon but you don’t really need any of them so long as you have a graphic software installed in your computer such as Adobe Photoshop.
Here are my recommendations on how to make/create a favicon:
- Make sure your image is a square.
- Start with a large image. Even though your final output is small there is no need to design small. It is easy enough to make it small later. At the very least I would say 100×100. Personally I usually start at 144×144 or 300×300.
- Keep in mind that the favicon includes the ENTIRE image, including the space you put between the icon itself and the edges. Therefore, maximize the space. To illustrate, I have placed a border around my image. In actual execution there is no border.
- Once you’ve completed the design for your favicon go to FILE > EXPORT > Save for Web (legacy).
- On the upper right choose PNG-24.
- On the dimensions below change your height or width to either 16×16 or 25×25. Click on SAVE.
- Save the file to the root folder of your website with the filename favicon.png. If you prefer to use a .ico file then you can just change the file extension from the Finder (on Mac) or File Explorer (on Windows).
It’s that simple! So simple you really shouldn’t forget to do it. 🙂 If you have any further questions on the topic feel free to leave me a message below.