Here’s a short and simple tip to ‘top’ off your webpage appearance – add a favicon.
What is a Favicon ?
Well, those tiny little images in the top left corner of this post are favicons.
You can customize the miniature icon next to your bookmarked web site and in the address bar next to your web page url to to be your own customized logo. When people scroll through there bookmarked pages your site will more easily stand out as they visually recognize your logo.
Including a favicon also gives you a more professional web appearance. If you pay attention, you’ll see all the major companies and brands have set up an image for their website.
How do you create a favicon?
For best quality I recommend having a graphic designer create an image 16 x 16 pixels in size. If you try to reduce the size of your standard logo it will likely look very blurry reduced down to such a small pixel size.
Many instructions for creating the image tell you to convert your image to .ico (icon) format and rename the file ‘favicon.ico’. This does work and I’ve used the method; however, it can be very frustrating finding a do-it-yourself program that effectively converts a .jpg or .gif image to .ico. So, I was happy to learn how to make a .gif image work without issue. So, you can simply save the image as ‘favicon.gif’ which I’ve used in the sample code below.
How to install the favicon?
After you’ve created (or had someone create for you) an image, you can rename the file ‘favicon.ico’ then upload it to your webhost within the desired folder. In the below example the favicon is uploaded to the ‘images’ folder.
Add the following code to the <head> tag of every webpage you want the favicon to appear:
<link rel=”icon” type=”image/gif” href=”http://yourwebsite.com/images/favicon.gif”>
If this talk about <head> tags and favicons is greek to you, I recommend hiring someone to do it for you, BUT at least now you’ll be clear what to ask for!
All the best,
Lisa Nelson
Too bad if you use Firefox. They just dropped support for favicons in favor of their “site identity button”.