How to Create a Favicon for Your Site or Blog
Favorite Icon or favicon is a small icon (16 pixels by 16 pixels) that appears next to a browser URL bar, on the bookmark lists and, for certain browsers, on the navigation tabs. Favicon will certainly improve the look of your site or blog. With the unique favicon then you assure that readers are able to individuate your site inside bookmark lists easily.
All you need to add a favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website, or wherever location you want. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency). But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one.
Creating a Favicon
When designing your favicon, therefore, you should concentrate on simple images or letters and it’s nothing more than a 16 pixels by 16 pixels icon.
1. Using Photoshop
You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export your image to the .ico file format. You can download ICO (Windows Icon) format plugin from Telegraphics. Copy or move the plugin into the “File Formats” folder inside your Photoshop “Plug-Ins” folder, then quit and relaunch Photoshop. Now you’re able to save your image as .ico.
2. Using Ave Iconifier – The Icon Converter
Aveiconifier is designed as a drag-and-drop tool that converts PNG files to ICO files and vice versa. It can create multi-icons from 16×16, 24×24, 32×32, 48×48, 64×64, 72×72 96×96, 128×128 PNG files. The application also supports batch conversion by simply dragging multiple ICO/PNG files to the program window.
Implementing the Favicon
Once you are done with the favicon.ico file you should upload it to your site. Then add this link in the head section (between and ) of each page on which you want the Favicon.ico to appear. Here is the example link code:
<head> <link rel="shortcut icon" href="http://www.webmasteradvance.com/icon.ico" /> </head>
Simply change the url (href) to your own favicon location, example: http://www.yourdomainname.com/icon.ico
Testing
Just open your browser and point to your site to check whether the favicon is appearing or not. Bookmark the site and open a couple of tabs to see how the icon is looking.
If your new Favicon does not show up right away, try refreshing the page or clearing your cache, or put a ‘?’ at the end of the url, which will trick a browser into thinking the page is new and not cached.
Article by Tantan Hilyatana
Tantan is a full time blogger, Internet marketer and Wordpress theme designer. He also works as an SEO manager handling client projects.We Recommend
Link Love: 20 Beautifully Image Sliders & Carousels
Facebook Comments
