TrueStar Computer Solutions Technology Blog » Website Development http://www.truestarcomputers.com/trueblog Staying on top of your Mac, PC, and Linux Computer Wed, 01 Jun 2011 20:56:01 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Adding a “Favicon” to your Website http://www.truestarcomputers.com/trueblog/2008/07/adding-a-favicon-to-your-website/ http://www.truestarcomputers.com/trueblog/2008/07/adding-a-favicon-to-your-website/#comments Fri, 11 Jul 2008 02:35:25 +0000 TrueStarTE http://truestarcomputers.com/trueblog/2008/07/11/adding-a-favicon-to-your-website/

Favicon?

I’m sure by now most of you have noticed the “favicons” located in the address bar of your browser or in  your favorites/bookmarks links:

Favicon in webpage

*Adding a “Favicon” to your website is actually a pretty simple process.  Follow the instructions below to add a favicon to your site.

Adding the Favicon:

1. Create your favicon.

To create your favicon (a 16×16 pixel .ico image), you may create one, or select an image of your choice and edit it with a graphics design/editing program like Adobe Photoshop/CS3, the GIMP, or some free services (here for instance) offered by numerous websites on the net.

2. Upload the favicon to the directory/folder in which your website’s index page (website’s home page) is located.

3. Add the following line of text between the <head> tags (<head> and </head> respectively) of your index page:

<link rel=“icon” href=“favicon.ico” type=“image/x-icon” />

Note:

[make sure that your favicon/icon is called "favicon.ico" (wihout the qoutes) or whatever the name of your favicon/image is.  The browser will try to load (as the favicon) whatever image name you put after "href=" ].  Please note that this image does NOT have to be a “.ico” image.  You may also use such images as a non-compressed/compressed PNG or a GIF.  All browsers may not support PNGs or GIFs however.

Also:

If you are having issues with this showing up in your browser, such as Firefox, Opera, K-Meleon, or any other browser, you may wish to put a “?” (question mark without quotes) after the URL as shown below:

<link rel=“icon” href=“favicon.ico?” type=“image/x-icon” />  (question mark located after “favicon.ico)

4. Publish/Post your edited index page.

5. Refresh your browser by pressing f5 on your keyboard or by pressing and holding the “Ctrl” key and momentarily pressing “R” on your keyboard.

This completes the implementation of the favicon.

Note:  You may wish to check whether your favicon is showing up on a different computer/different browser to avoid issues with it not showing up. Also note that on a Linux/Unix server, you must make sure that all your text matches exactly ( Characters/letters are case-sensitive on Linux/Unix servers.)

* This refers to adding a favicon to your unix-based server and may be different given your situation and Server Operating System.

Your TrueStar Technology Expert


Powered by TrueStar Computer Solutions

]]> http://www.truestarcomputers.com/trueblog/2008/07/adding-a-favicon-to-your-website/feed/ 17