Sunday, February 26, 2012

Our Site has an Icon

It was bound to happen. As I was working on updating the site it occurred to me that all of the Sites that I visit have an Icon that appears on the Address Bar of my browser and also on the Tab of my Browser.

Took only a few moments to make up my mind. Had to have one and got started right away.

Did a few searches on Google to find out what size to make the new Icon. As I soon discovered, the correct size for the icon is 16 X 16 pixels.

So I opened up Gimp on Linux Mint and started by opening a blank image and setting it size to the desired dimensions.  Once on the screen, I then used the Preferences to set the grid size to 1 pixel X 1 pixel and proceeded to create my first Website Icon.

If you would like to see it you can visit our website here.

Before I could use it however, I had to find out how to use it. Spent most of the next hour trying different variations of code that is to be put between the <head> and </head> tags in the html of the Website.

My final code looks like:

"<link type="image/x-icon" href="busnet.ico" rel="SHORTCUT ICON"/>

All of the other variations that did not work were very similar to this. The only thing that I changed was the name of the file it referenced as well as the location. The other variations seemed to indicate they referenced a file location, so I just kept after it with no success at all. So I turned back to my Google Search and checked a few more listings which all seemed to adhere to these indicators. Finally after some desperation, I decided to go to a few websites and look at the source of the sites, the html code, several used the quotes around the file name and not a location or directory structure. Having seen it now, I then did a few more searches and html checks to confirm what I was seeing.

The code above I pulled out of another site, but it gave an error.  Then I noted that the first work "link" was all in upper case. Once I changed them all to lower case the error went away and my new Icon displayed on the web browsers.

No comments:

Post a Comment