Favicon is a little image that displayed next to the url of a web site when it’s loaded on a browser. These icons are usually in .ico format and sometimes, it can be a .gif or .png. Favicon is also displayed in bookmarks menu, when a site is bookmarked. It helps webmasters to personalize their websites. In this post I’m going to tell you how to create and add favicon to your website
How to Create a Favicon
A favicon may be in 16×16 pixels or 32×32 pixels with 16 colors. I recommend using 32×32 pixels because of quality of the icon. There are two methods you can create a favicon. First method is on your PC, using software and other one is online, using favicon generating sites.
1. How to create a favicon locally on your computer
There are many programs you can use to create favicons. If you have Photoshop installed on your computer, you’ll need to download ICO (Windows Icon) file format plugin for Photoshop and use it to design your favicon. ICO file format is a free plugin for Photoshop and can be downloaded from telegraphics. If you don’t have Photoshop, There is always free software to use. GIMP is a good choice if you wondering. A great tutorial about using GIMP can be found egressive.com. Irfanview is also a handy tool to make favicons. With it you can shrink other images to meet favicon specification and save as .ico file.
It’s very important that you save favicon as favicon.ico. If not it won’t work. And also don’t just shrink an image and rename it with .ico extension. That’s not a real Icon and won’t work either.
2. How to Create a Favicon Online
This is the easiest method to create a favicon. No downloads, no installations. Just type “favicon generator” in Google and you’ll receive list of online favicon generators. Pick anyone you like and follow instructions on their site. I will list some online icon editors below for you. Just Google it.
- Dynamic Drive
- Favicon.cc
- GenFavicon
How to insert Favicon to a website
To complete this guide, we will now try to add generated favicon to web site. Connect to your host via ftp and upload favicon.ico file to root of your website. This won’t just display favicon on your website. Maybe it will, but to make sure you need to call it on your site’s header. Find file called index.php or index.html on you site’s root folder. Make a backup of that file, because we are going to edit it. Open original file with text editor like notepad.
Now find this code within your index file.
Paste following code right above it.
[html]<link rel="shortcut icon" href="link to favicon">[/html]For animated favicons use below code
[html]<link rel="shortcut icon" href="link to favicon"><link rel="icon" href="link to favicon" type="image/gif">[/html]
Make sure you replace link to favicon with link to favicon just uploaded with ftp. Save your index file and re-upload to server. That’s all, Browse your site to see your favorite icon.
If you can’t see your favicon after adding code, May be your browser cache serving you a cached page. Try clearing your browser cache and refreshing page. If that didn’t work, add a “?” mark at the end of url and hit enter. This will trick web browser into thinking the page is new and not cached. Now it should be fine. Leave a reply if anything goes wrong.