Sep 26, 2008

Adding a Favicon

Favicons are small graphics associated with a particular website or webpage. They're mostly there for decorative purposes but they can come in handy in your browser bookmarks because they help identify a website or blog easier. These favicons are displayed to the left of the URL in your browser and in the tabs of some browsers when you are visiting a website or blog.

Take a look up at the URL bar above, you should see the favicon I created for this blog. It consists of the letters "GB" inside of a grey circle instead of the orange and white Blogger logo. You too can create a favicon and easily replace the original Blogger logo on your blog.

Most favicon tutorials will tell you that you have to create and save your favicon as a .ico file but for use in a Blogger template you can save your favicon as either a .jpeg or .png file. The second thing to consider is the size of your favicon, most of them are 15x15 pixels with some being 32x32 pixels. Given the small canvas you have to work with the design of your favicon will need some thought.
Step #1: Create
Take a look at your favorite websites and blogs and take inspiration from the favicons they use. I suggest sticking with simple and easy to read letters or shapes if you aren't good at creating icons given the small size of these graphics. In a pinch resize a photo of yours, (flower, plant, seeds etc) down to the appropriate size and use it as a favicon. I resized a photo of a flower my Amaryllis blog since I was too lazy to create a new graphic.
Step #2: Save and Upload
Once you've created and saved your image the next step is to upload it to the photo hosting site of your choice. If you're using Blogger you have free image hosting space already with Picasa Web Albums but use whatever service you prefer.
Step #3: Paste
Go to Layout>Edit HTML. The first thing you should do whenever you are editing your template is to create a backup of it in the event you make a mistake. You can always upload the copy of the template and everything should be fine. I suggest you create a "test" blog that you can experiment on, once you've become comfortable you can perform the same actions on your blog with confidence. Paste the following code:

<link rel="shortcut icon" href="http://YourFaviconURLGoesHere" />
<ink rel="icon" href="http://YourFaviconURLGoesHere" />


Right below this line of code:
<head>


The "head" tag is located near the top of the page that contains the code that makes up your blog's template. It should be the sixth or seventh line of code from the top of the page.
Step#4: Preview and Save
Once you've pasted the necessary code hit "Preview" and if everything went smoothly your favicon should appear in the preview window. Once you've verified it just click save and you're done!


Update:
Some changes with Blogger caused a problem with this modification. You now need to place the code from Step #3 between these two lines of code.

]]> </b:skin>
</head>


You should find them near the bottom of your template below the footer.

No comments:

Post a Comment

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.