How To Create Favicon To Your Website

When you access some website, you can see in your website browser a little tiny icon beside http. That’s called Favicon. OK, in this post I will demonstrate to you how to add a Favicon to your website. You need a Photoshop and HTML software like Dreamweaver or Frontpage to make this one.

Step 1 :
Make a picture with dimension of 16 x 16 pixel. Usually I make the image by Adobe Photoshop. For example my own logo, like this one :

favicon sample

Make sure you make it with a transparent Background (No background layer) to remove the white graphic as a background in your website browser.

favicon sample without background

Then, save your icon into a .PNG or .GIF

Step 2 :
You can use many web services that can generate your image (JPG, GIF, PNG) to .ico extension. But choose the Favicon web generator that compatible to generate an image with a transparant background.

Usually I use this web service :
Favicon Generator

favicon generator website

Input your image in there and press GENERATE. When it finished, download the file to your computer and you can see the extension file is already converted into .ico

Step 3 :
Upload your favicon.ico to your host using FTP Program, for example i upload the file in /public_html/images/

Step 4 :
Use your HTML Program like Dreamweaver or Front Page, and then edit your website page. Change your Design Page to Code Page to see the html code.

Then copy and paste this code to the <head> section of your webpages :

<link rel=”SHORTCUT ICON ” href=”www.yourdomain.com/images/favicon.ico” >

if you upload the favicon in another location like www.yourdomain.com/favicon.ico. So, your code page will be like this :

<HTML>
<HEAD><TITLE>eBook Covers | eBook Cover Generator | eBook Cover Software</TITLE>
<LINK REL=”SHORTCUT ICON” HREF=”http://www.yourdomain.com/favicon.ico”>

DONE…