Favicons are tiny images which web browsers place next to the title in the tab for a web page. Modern browsers also use favicons in the bookmarking section, the links bar and the cards in the most visited page. In most cases the favicon will be a business logo.  Favicons are basically very small branding assets while also being useful for improving user experience.

Creating a Favicon

In the beginning, a favicon was a simple 16px by 16px image in .ico format. Now you’ll require a plethora of different favicon sizes and formats to suit the huge variety of devices and operating systems in the wilderness. This CSS Tricks article describes these differences in detail.

Favicons are easy to implement into a website, but making a good-looking image in such a tiny number of pixels is not a trivial task. One option is to use a favicon generator. A great example which will account for all the different sizes required is Real Favicon Generator. You upload your full-size logo and the generator will spit out a collection of image files. You can also build favicons from scratch using imaging packages like Photoshop. This is often preferable to create a crisp image.

Third Party Website Icons

Most likely, favicons will not be the only icon asset you need. For every social media profile you create for your business, you’ll need a separate icon image. Each social media site uses different image sizes for icons. The image is usually square, but not always. Most social media sites will provide a guide for the sizes and image formats of their different icons. An example is Facebook’s profile sizing page. Gravatar is another useful site to have an icon for.

Read More

Learn more about favicons at these handy links:

• Wikipedia favicon article
• Internet Favicon Madness