What Is Favicon?

Ever been to a website and notice there is a small icon embedded next to the site’s URL? For example, here in Kongtechnology.com’s address bar, you will notice a King Kong been trapped inside a square box. Pretty neat huh? This is called favicon, a short term referring to “Favourite Icon”.

What Does a Favicon Do?

Although some people find favicon useless, and opined its existence as ‘to beautify’ a website. This is not entirely true.

For a cyber world that crawls with millions of websites, it is important to stand out from the crowd and get people to remember you. You might not notice, but our brain is more likely to remember an image rather than a lengthy URL. If you do not own a logo for your blog, brand your site with a catchy favicon is a great way to attract people’s attention. Ditch the orange Blogger or black-white Wordpress favicon, and let new visitors have a second look at your URL. Get recognized!

Today I will be covering ways to insert a favicon to your blog header in Blogger, Wordpress and Self-Hosted site. Before I go further with each platform, you need to have your favicon image ready first.

Types of Favicon: Ready-made or Self-made

It could be a picture of your own image, an avatar, the initials of your name, a logo or even your hamster… just make sure it goes well with your blog theme. Be creative but not too complex, since the standard size for a favicon is 16 x 16 pixels (in width and height). Trust me, it’s VERY small.

While I think you won’t be having much problem finding existing picture for your favicon, I would like to assist those who are going for Self-made favicon images:

For Initials/Logo favicon:

Photoshop is a great software for any type of image-editing. You could set your canvas size to 16×16 px before you work on it. However, to me, it is much easier to create the image first, then resize it. To do so:

1. Right Click > Image size.

2. Un-checked the ‘Constraint Proportions’. Type in the pixels as follow:

3. Here is how your new image would look like. Didn’t I tell you it was small?

For Avatar Favicon:

Some people are less comfortable to display their real images in public. However, if they still wish to have the ‘personal-touch’ in their site, avatar would be a brilliant choice. Portrait Illustration Maker is a fantastic site to generate self-customized avatar.

**Randomizer’ is another option if you wish to get a ready-made avatar instantly**

Each category has tons of choices. By not being picky, you will definitely find some that will resemble you the most. So get a portrait of yourself and start digging through the features. Cool thing is, you also get to adjust and colorize your choices. Try it!

Here’s a version of myself. (Yeah, just being silly)

Now you have your image done, it’s time to resize it to the appropriate 16 x 16px. If you do not have photoshop, no worries as there are other online resizing sites for you to play with:

1. Picasion

2. Online Image Resize

3. Favicon Generator

Time For the Real DeaL…

Insert Favicon to Your Site

Now you have the right favicon, with the right size. Next, you need to convert the existing file format (.jpg or .png) to .ico. Go to FavIcon Generator and get the image and code generated as follow:

1. Locate your file and upload it, with or without sharpening it.

2. Once the favicon is successfully generated, you will be presented with some codes such as following:

For free hosting sites like Blogger or Wordpress, you will be embedding the code “B” to your header, here’s how:

For Blogger users:

1. Log In to your Blogger account.
2. Go to Layout> Edit HTML
3. Locate the code below (via Ctrl+F):
   <title><data:blog.pageTitle/></title>

   Copy the code “B” right after it.

4. Save your template. View your blog, or (Ctrl+F5) to refresh your browser.

For Wordpress Users:

1. Log In to your WP account.
2. Go To Design > Theme Editor. At your “Theme Files” sidebar, locate “Header.php”
3. Find and paste code “B” before </head>. Update Your File.

You may need to refresh it a couple of times to get the favicon up and running on your site.

For Self-Hosted site:

You have 2 options: to have the favicon (.ico) hosted on your own site, or host it at another server. The difference between the two; is… if you host it on another server:

• Your site would have a backlink to the third party image-hosting site;
• If anything happens to that image-hosting site, there goes your favicon!

So, if you wish to host the favicon at your own site, that is when you use the ‘direct link’ as shown in code “A”.

1. Log In to your web hosting site.

2. Upload your favicon (.ico) to your webhost at “public_html” folder.

(In future, if you ever wish to change your favicon, just replace the existing .ico file with a new one)

3. Log In to your WP account, Go to Design >Theme Editor > ‘Header. Php’

4. Paste Code “A” (as below) before </head> :

<link rel=”shortcut icon” href=”/favicon.ico” />

5. Update file.

Extra hints:

If you have multiple subdomains created for your website, for example: http://women.yourdomain.com,

and you wish the favicon to appear in every subdomain pages, you may need to upload the favicon to all of the subdomain folders (here, the folder name is ‘women’) within the ‘public_html’ directory.

If your main site url is ‘http://www.yourdomain.com/blog’ instead of ‘http://www.yourdomain.com’, you will need to upload the .ico file to the ‘blog’ sub-folder of this particular domain.

Hope this tutorial helps you in creating your very own favicon. Have you discovered a much easier way to do it? Kindly share with us your experience.