Designing a website icon (favicon) with non pixelated smooth letters is quite a challenge. Recently as part of a web design project for an Australian company we had to create a favicon with smooth letters in it. During the process we learned some tips and tricks which helped us design and make a nice, smooth and professional looking favicon for our client.
The tricky thing about website icons is that they are tiny. The classic favicon was 16 x 16 pixels. You can now use 24×24 pixel, but even that is still quite small.
The main trick to making the smoother website icon is to first design it using Adobe Photoshop at the scale size it will be used. The recommended favicon size is 16 x 16 pixels. So you have to create your artwork in that size. Like we found out in our first attempt, making it in a big file size and later reducing will not work. You won’t get good results by starting with a large vector image and letting the program scale it down.
In our case, our Australian client’s logo consisted of the company name which was two words. Their logo didn’t have any shape we could use as an icon. So we decided to take the two first letters which was V & C from the company name. The screenshot image here shows our first draft website icon. We were not happy about it. The letters in the icon was too pixelated and jagged. Especially the character ‘V’ needed smoothing out.
After subsequent attempts we came up with this second much better icon which had more smooth letters without jagged edges. We made this second better looking icon by first making a photoshop file with the icon artwork in the size of 16 by 16 pixels. Then we saved it as a .png file format. Finally we uploaded it to the popular online favicon generating website www.favicon.cc. Using the favicon generating tool on this website, we got our small png icon converted it into the .ico website icon format and downloaded the finished smooth icon for our client.
For the letters “V” & “C” in our icon, we tried using various fonts and style. We found the best icon letters are created in the final .ico file, when we used Arial font, style regular and the font-size of 12px or 13px. Using bold letters created ugly, jagged edge icon letters.