To create a favicon, construct your 16x16 image in any image editor and save it as a gif file if your browser does not support the .ico format. It helps if you have a transparent file with no background colors such as white and jagged edges.
Since I use Adobe Photoshop which does not provide a way to save files in .ico format, I saved mine as a gif and then uploaded it to a site for the conversion. There are many sites on the web offering free converter software which you would have to download on your computer before you can use it. I opted to upload my image to a converter tool instead which I found here. I checked their output file with virus scanners so I can recommend their site to you. Once the conversion is done, you then download the .ico version of your file back to your computer. Then it goes to your server to the same space, meaning directory, that you have specified in your HTML link statement.
After your image is prepped, and uploaded to your server, you can add this line to your HTML file in the <head> section, substituting your URL name instead my site name, cssbakery:
<link href='http://www.cssrule.com/pics/favicon.ico' rel='icon' type='image'/>
With these changes, the orange Blogger icon next to my URL gets replaced with a cupcake image. The new icon also shows up on the browser tabs and under Bookmarks next to cssbakery name if you bookmark my site. Results as displayed in Firefox:
Important note for those on Blogger:
Blogger users need to place the "link" statement right before </head> ending tag or Blogger will overwrite it, placing their orange "B" logo as the favicon. My favicon displays correctly under Firefox next to the URL, under Bookmarks and also on the site tabs of the browser. There are some quirks under IE7, when I work those out I will post an update.
Posts
Post a Comment
Note: Only a member of this blog may post a comment.