Featured Articles

Tuesday, June 28, 2011

Changing the Blogger Favicon

This is a different kind of update. It's more of a tutorial. I recently figured out how to change the favicon for my site (The favicon is the image that appears in the tab of your web browser, right before the name of the page). Besides feeling more ownership if your site and looking just that much more professional, it of course simply makes it easier to locate the right tab when you have multiple blogger sites open. Here's my before and after:

I've noticed that several other Magic: The Gathering sites use blogger (I'm not the only one!), and all the ones I've come across all have the default Blogger icon, so I thought I'd share my results.

The steps are simple:

  1. Create a favicon
  2. Upload the favicon
  3. Display the favicon

I got my initial instructions from this blogpost, but I did end up having some trouble, so I'm going to detail what I did myself. My biggest problem was using the suggested Favicon generators to create a .ico file of the Favicon, which is as far as I can tell, the preferred format for Favicons. I was having trouble finding a way to upload it properly, and it seems that .png files work just the same, so that's what I did, then everything else went according to plan.

Create a favicon

You have to make an image that is 16x16 pixels. Do this with whatever programs you want, I can't really help you much here. After you have your design, save it as a .png file.

Note: 32x32 images might work from what I've read, but 16x16 was enough for me so I didn't try. Another file type that supposedly works is .gif but I also didn't try that because I saw someone else successfully use .png so that's the first type I tried.

Upload the favicon

Create a New post in blogger and go through the Insert Image button to upload your Favicon in the "Compose" mode. (I originally had trouble here because it seemed that blogger and picasa simply refused to see .ico files.)

Next you need to know the URL of the image, so switch from "Compose" mode to "Edit HTML" and copy the URL somewhere. The URL for the Before and After pic above looks like this:


Note: You will see two URLs. The correct one should be the second one. Or you can simply remove the link from the image while you're still in "Compose" mode by clicking on the image, and then hitting "Link". Usually you use that to add a link to something, but images you upload already come with a link that go to a page that shows the image only. Clicking on "Link" will remove it. Then after that's removed, you'll only see one URL when you go to "Edit HTML" mode.

Display the favicon

This is where the original instructions I found really helped out, but I'll be even more specific.

  • Click on "Design"
  • Click on "Edit HTML". Make a backup of the HTML if you'd like, but we're not deleting anything, only adding, so you shouldn't need to.
  • Press "Ctrl+F" and type in "</head>" (or manually search for that tag)
  • Copy and Paste the following code right before the </head> tag:

    <link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
    <link href='YOUR-FAVICON-URL' rel='icon'/> 

    • Replace the text that is highlighted in red with the URL of your favicon.
    • Click "Save Template".
    • Click on "View Blog" and you should see the results! (If not, you might want to refresh the page by pressing "F5", which will help clear any cookies.)

    That's it!

    If this isn't clear enough, I'll be happy to upload pics of each step.

    No comments:

    Post a Comment