Hey, I noticed you haven't subscribed yet! If you'd like to be notified the next time I write something, you may want to sign-up for email alerts or subscribe to the RSS/Atom feed. Thanks for reading!
Want a cool and easy way to market your website? You need a favicon! If you don’t know what that is, it’s that really small icon you see in the address bar when you visit particular websites (like joemidway.com).
There are a couple of ways to design your own icon. There are a few services on the Internet where you can convert a picture into a favicon (such as http://www.flavicon.com/converter). You can also create your own icon in Photoshop or The Gimp by making it 64×64 pixels (minimum is 16×16, while 64 is a multiple of 16) and saving it or exporting it as a .ico file. For Photoshop, you will need the .ico plugin from Telegraphics. The reason you will create the icon in 64×64 pixels is because the .ico format is automatically resized or compressed. When the most common 16×16 format is called from your website, the .ico file is just automatically resized.
So, now that you’ve created your favicon icon, let’s get it working on your site! First things first, make sure that your icon file is named specifically “favicon.ico”. Upload the favicon.ico file to the root directory of your website (this is the same folder/area where your index.html file is located for your website). The next thing you need to do is edit every file on your website to point to your new favicon.ico - the easiest way to do this is edit your header.php file if you’re using a blog or content management software (CMS). The header.php file is automatically called from every page on your website, therefore it only requires you to edit the one page (header.php) and the changes will take affect on all of the other pages. Inside your header.php file or any other files that you are editing to include the favicon.ico file, you should look for the <head> and </head> tags. The tags could be modified, such as <head profile…> or something else, so look carefully. Anyhow, you want to place the following line somewhere between the <head> and the </head> tags:
<link rel=“shortcut icon” href=“http://yourwebsite.com/favicon.ico” />
Well, that’s about it. At this point, you can test your favicon by refreshing your website and seeing if it shows up (which it should!). If it doesn’t show up at first, it could be because you have your site cached and it just needs to be refreshed (which could take a while depending on your webserver). Good luck, and as usual, let me know how it goes or if you run into any problems!
(1 votes, average: 4 out of 5)
Loading ...
2 responses so far ↓
1 Ann Bernard - Jul 31, 2007 at 2:23 am
Thank you, thank you and thank you…I’ve been wondering about how to do that!!
2 Joe - Aug 1, 2007 at 6:13 am
Glad it helped you out! It will definitely help you personalize your site
Leave a Comment