Guide: What is a favicon? How to set a favicon?

In the competitive online marketplace, little details matter a lot. Web sites often sink or swim based on little cues that tell the visitor if the site is credible, polished, and professional. One of these important details is the favicon. But what is a favicon? And how can you set one for your website?

What is a favicon?

A favicon is simply an image that acts as an icon for a website. These icons appear in some places when you browse the internet. In tabbed web browsers, the favicon appears in the tab to the left of the website’s name, helping to cue to the visitor to the brand identity of the website.

Wikipedia’s iconic serif “W,” Google’s multi-color “G,” Amazon’s bold lowercase “a” with a yellow arrow swooping underneath — these favicons help to orient the websites’ visitors while adding an extra layer of branding. When you’re multitasking online, favicons provide a visual cue to help guide you to the tab you’re looking for.

Depending on the web browser, favicons may also appear next to the address bar, in the bookmarks, in the browsing history, or as an icon linking directly to a website.

How do I set a favicon?

Now you know what is a favicon and where do they appear. now get to know how to set one for your site. There are some ways to set a favicon, and most methods will work in all popular modern browsers. But before you can set a favicon, you will need to create one and upload it to your website.

Favicons are very small images — typically just 16 by 16 pixels. To design a recognizable favicon at such a small size, it pays to keep it simple.

For companies that are most easily recognized by their name, the first letter of that name, presented in the logotype font, is a great option for a favicon. For websites that are known by a graphical logo, such as Twitter with their iconic powder-blue bird, a graphical favicon can work very well.

The most common file formats for the favicon are .ico and .png. The .ico file type is widely supported, making it the most popular choice; it also can accommodate multiple image resolutions, making it easy for your favicon to scale gracefully when displayed in various ways. The .png file type is supported by modern browsers, but not by Internet Explorer before IE 9. (Several other file types are also supported, but their usefulness is more limited.)

Creating a .ico file is quite simple. Once you have created your image, the .ico file type can be exported right from Photoshop, or it can be created from your .png file(s) using some easy online file converters like convertico.com.

Setting a favicon on your website

Setting a favicon is simply a matter of uploading your .ico or .png file to your web server and placing a line of code in the <head> section of your website’s HTML code. Platforms like WordPress and Blogger may have specific ways for you to add your favicon — check their support files for specific instructions.

Once you have uploaded your favicon to the web, add the following code between the opening and closing <head> tags in your website’s HTML code:

<link rel=”shortcut icon” type=”image/x-icon” href=”http://mylink.com/myicon.ico” />

where “http://mylink.com/myicon.ico” is the web address for your favicon file.

Now you’re ready to extend your brand with a custom favicon for your website.

Categories: