How to make a FavIcon (favorites icon)

If you’re anything like me, your web browser always has at least a half dozen tabs open. It should get confusing as you switch back and forth between all those tabs, but it doesn’t. Why? Because of FavIcons – those little images at the top of your Internet browser next to the website URL.

FavIcons are great for brand awareness and brand recognition. In a sea of open tabs, they allow users to recognize your website at a glance. So what exactly is a FavIcon? FavIcon stands for favorites icon and is a website or bookmark  icon. A FavIcon is 16 pixels x 16 pixels and displays at the top of your Internet browser next to the website url.

In this example, I am going to create a FavIcon using the Hunt Creative Group logo.

Step 1: Get your logo.

The logo can be in a number of formats: .jpg, .gif, or.png.

[fancy_images width=”32 px” height=”32 px”]

[/fancy_images]

Step 2
: Create the FavIcon.

Go to Digital-Pic. Browse and find your logo. Then hit download FavIcon and save the FavIcon to your computer.

[fancy_images width=”600 px” height=”321 px”]

[/fancy_images]


Step 3
: Upload your FavIcon to your website and write down the location.


Step 4
: Putting the FavIcon in the html code.

Put this line of code in the <head> of your html file on the page or pages you wish for it to appear.

<link rel=”shortcut icon” type=”image/x-icon” href=”File Location/your favicon name.ico“>

If you are a WordPress user, you can go to the Appearance tab and click the Editor link. Find the Header template and look for the <head> tag.

Paste this <link rel=”shortcut icon” type=”image/x-icon” href=”File Location/your favicon name.ico“> before the head tag is closed </head>.

Easy, right? Four simple steps to help differentiate your website.

Share
This