What Is Favicon and How to Generate it

What Are Favicons?

A favicon could be a tiny icon that appears on the tab of your browser. It’s additionally shown in your bookmarks whenever somebody favors your web site. the most goal of favicon is that the simple recognition of your brand.

So a favicon is a tiny graphic that’s related to your web site and it will appear:

On the browser tabs;
In the address bar of the site in several browsers;
In the favorites list and browser bookmarks bar;
As an app icon on mobile devices (for example, when somebody adds your web site to your phone’s home screen);
In Pinterest pins.
The favicons are around since the first days of the internet, however made their official debut with the launch of Microsoft’s internet explorer 5 in 1999.

Favicon File Formats

The file format your favicon will have are some things you need to consider. The foremost common file formats for favicon (and we’ll discuss them quickly) are: ICO and PNG.

The ICO format is that the solely format supported by internet explorer. The ICO file format remains the foremost commonly used file type for the favicon image and is wide supported by browsers. Also, it’s sensible practice to always include an ICO version, whether or not you’re using PNGs. the explanations are:

A favicon in PNG won’t be supported by certain older browsers.
The location wherever browsers search for a favicon by default will vary wide and so there’s a risk of 404 Not Found errors being came back if the default favicon.ico file is not present.

Favicon Size?

The ICO file format permits multiple pictures and resolutions to be displayed in an exceedingly line. this suggests that you will save your favicon in different sizes, for example 16 × 16, 32 × 32 and 48 × 48 (as counseled by Microsoft), and therefore the browser can confirm the suitable size to show.

The most common sizes for favicons are:

The second most most popular format of nowadays is the PNG format. one among the most advantages of using a PNG file is that it’s usually easier to make in image editing programs like Photoshop, additionally to allowing the use of transparent background.

How to create a favicon

Although there are many ways to make favicons, the simplest is to use an online tool. we tend to happen to have a Favicon Generator that’s entirely free, simply upload a picture, crop it, so download the resulting icon.

How to link to your favicon

Now that you’ve created a pleasant very little favicon, you need to inform web browsers and alternative applications wherever to find it. Adding this line to the <head> section of your HTML can make sure that your favicon are found:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

To see your new favicon, you may need to clear your browser’s cache or restart your browser.

Exit mobile version