Creating a Favicon
Have you ever wondered how websites show their logo next to the URL at the top of browser windows? It’s quite simple to do in little time. Favorite icons show up in other places too. Bookmarked pages, on tabs in tabbed browsers, and as icons on your desktop for saved sites.
What You Need
You’ll need a few tools to get started. Adobe Photoshop or another type of design software is needed. You’ll also need the ability to save files as an Icon File (ICO). I found a great FREE plug-in for Photoshop at Telegraphics. Download and follow installation instructions.
Tutorial
Favorite Icons are small images. The actual size of the finished file will be 16×16. Because of the difficulty in drawing at such a small scale I’ll typically start off by creating a canvas in Photoshop at 64×64.
Next, start designing. Remember, it’s going to be smaller than what you see if you have scaled up for ease of drawing. I’ve found that simple graphics and one to three colors work the best. It needs to be a simple design.
When you’re done designing go to Image>Image size and change to 16×16. Make sure that Resample Image is checked and in the pulldown menu select Bicubic Sharper.
At this point you can see what your icon will look like. If it needs some more tweaking or the image doesn’t hold up at a small size, now would be the time to go back and correct it. To make sure that you are viewing the icon in it’s actual size go to View>Actual Pixels.
With the Icon completed it’s time to save. Go to File>Save as and name it favicon. This is important! It has to be named favicon.ico to work properly and for browsers to find the file. You will then select Windows Icon (ICO) from the file format menu and save to your desired location.
Now, it’s time to upload the image. Connect to your website’s server and upload the image in the main directory. This is the root folder of your website. It can’t be in any folder. It should be where your home page (index.html) is located.
For some browsers, you’re done. Because of it’s name and location on your server, the browser knows what to do and how to view the image. Some browsers can be difficult so you may want to add a small amount of code to your site to be sure it’s seen. In the <head> section of your index.html add this bit of code -
<link rel=”Shortcut Icon” href=”/favicon.ico”>
Finally, save your modified page and upload the new files.
Viewing
Open up your desired browser and check out your site. If you don’t see the icon appear right away don’t worry. You may need to clear the cache in your web browser to “renew” the look of you site. Other browsers simply need you to hit “refresh” while others may want you to add the site to your bookmarks/favorites folder to actually see the icon appear.
Something Extra
If you’d like a little inspiration, check out this gallery of favicons.
A favicon generator.
-
Thumbnail photo courtesy of rob5408 on Flickr.
Leave a comment