SubscribeUse FavIcons to Improve Your Site’s Look and Traffic
The word favicon is a combination of “favorite� and “icon�. It’s a small graphic that appears in three places – in your web browser address bar next to the URL, in the tab for the particular page within your web browser, and within your list of Favorites (“Bookmarks� in Mozilla Firefox). Favicons are great, and relatively easy, additions that Prosper clients can make to their sites whether they are using a web editing program such as Dreamweaver, or sitecreatorplus.
The benefits of having a favicon are twofold. First, it gives your site a professional look. Check out some of the major websites such as Google and Amazon – they’ve got favicons. Second, a favicon highlights your site over other sites within someone’s bookmarks, and thus there’s a chance that you’ll get increased repeat visitors.
Here’s how to do a favicon (for both HTML editing programs and sitecreatorplus):
Step One
Create your favicon in an image-editing program such as Adobe Photoshop or GIMP. You need to make the image a perfect square, so start out with a canvas size of 30 pixels by 30 pixels, preferably with a colored canvas. I advise using a single letter in a colored box for your favicon, which can be read easily (preferably use the first letter of your domain name). For examples of single letter favicons see Google, Amazon, one of my client’s sites, Stress Management Tips, and two of my own sites – Test Preparation and Acoustic Guitars. I don’t advise using a picture or multi-letter logo because it’s hard to tell what it is. For example, check out eBay’s favicon: without getting right up next to the screen, it’s hard to tell that it’s the eBay logo.
Step Two
Convert your image into an .ico document. To do this, visit this favicon generator. Simply upload your image by clicking on the “Browse� button, then click on the “Generate Icon� button. This will produce a preview of what your favicon will look like. If you’re happy, then click on the “Download Favicon� button and save the favicon.ico file to your Desktop.
Step Three (HTML editor users)
Copy and paste this code:
<link rel=”shortcut icon” href=”/favicon.ico”>
into the HEAD section of your index page. Upload the favicon.ico file and your new index page to your server. You’ll likely see your favicon appear immediately in Firefox, but Explorer tends to take a couple of days. Call the Resource Line for help if you need it.
Step Three (sitecreatorplus users)
Create a new multimedia page but keep the page hidden from the index. Go to the Edit section for that page, and just below the editing box, you will see a box that states: You may add any type of file here. Click on “Click to Select File� and upload your favicon.ico file from your desktop by clicking on the “Browse� button, and then “Save�. Scroll to the bottom of the page and click on “Save�. Then, go to Manage Pages, and click on “Edit� for your Home page. Once in the Editor, click on the “Internet Marketing� tab. Scroll down to the bottom where it says <HEAD> </HEAD> (Advanced Users), and copy and paste this code into that section:
<link rel=”shortcut icon” href=”/f/favicon.ico”>
Then click on “Save�. If you go to your home page, you should see your favicon in your web browser address bar. If not, call the Resource Line for help.
I’ve listed here how to do favicons for two common methods that Prosper eCommerce clients use to produce their sites. This should be a relatively easy task for you, so if you have any difficulties, please call Prosper’s Resource Line. If you use something such as Shopify, you can still create a favicon – just give the Resource Line a jingle for assistance once you reach Step Three in the above steps.
(Note: Thanks to Curtis Jensen at the Resource Line for assistance with this post.)
by Michael Stone
on September 9th, 2008 at 5:25 pm
There is a small coding error within this post, so please don’t copy and paste any coding. Instead, copy and paste the coding from the favicon generator from Dynamic Drive.