Add a Favicon to your site!
June 18, 2009 in Tutorials, Web Design
Increase your brand identity by including your logo to the address bar of your browser and tabs…how do you do this? Add a FAVICON!
A Favicon is a small custom icon that appears next to a website’s URL in the address bar of most web browsers. The icon also shows up in your bookmarks, on the tabs in browsers, and as Internet shortcuts on your desktop or other folders in Windows.
Let’s get started: Deciding on what image to make as your icon is not difficult, but you need to keep two pointers in mind.
Upload your image and check the option “Merge with a 48×48 large XP icon.”
Click on the “Create Icon” button and wait for a few seconds.
Next, a preview of your favicon will appear. If you like what you see… click on “Download FavIcon” to your desktop (IMPORTANT: do not change the file name!!) and continue to Step 3. If you are unhappy with what you see, make the adjustments in your image editor and repeate Step 2 until your heart’s content!
<link rel=”shortcut ico” href=”http://www.larachandesign.com/images/favicon.ico”>
Replace “larachandesign.com” with your site. Replace “images” with the directory name where your favicon.ico file is located. Remeber to place the code within the <head></head> section. Save your file.
Let’s get started: Deciding on what image to make as your icon is not difficult, but you need to keep two pointers in mind.
- Favicons are in the end, only 16×16 pixels. That is VERY small and will not show much detail.
- Select images or shapes that are simple.
Step 1: Prep your image
At this point, the image you select can be any size (large, medium, small) but make sure that the dimensions are square. You may have to crop your image to get the right shape. This is easily done in Photoshop, but if you don’t have Photoshop, you can your MS Paint(should be installed on your Windows machine) or download Picasa for free. Now if your image is large or medium in size… scale it down so that its about 2 inches x 2 inches. Save your image as a .JPEG, .BMP, .PNG or .GIF (Use a .PNG or .GIF if you want transparency)Step 2: Transform image to icon
Head over to Dynamic Drive (a great, free place to generate your favicon) by clicking on the link below:Step 3: Upload the file
At first, this step may seem a bit out of your league, but if you follow my steps, I will hold your hand through it…. ready?!?!?
Upload your file (“favicon.ico”) to your site. You can put this file wherever you like, but make sure you remember what directory its stored in. I recommend your ‘images’ directory (after all… its an image). To learn how to upload a files to your site, read my tutorial Open your homepage in your favorite html editor or text editor. Within the HEAD section of your code, add the following line:<link rel=”shortcut ico” href=”http://www.larachandesign.com/images/favicon.ico”>
Replace “larachandesign.com” with your site. Replace “images” with the directory name where your favicon.ico file is located. Remeber to place the code within the <head></head> section. Save your file.