Join Today!

Customize Your Favicon for Super Blog Sunday


For those of you with Blogger Blogs, here's a fun and easy way to customize your site.  You can change the favicon by adding a simple code into your html. What's a favicon? Next to the URL and browser tabs of this page, you should see a little football. That's a favicon. If you don't see it and instead see an "e" you're probably browsing with Internet Explorer. This trick does not work with IE. Why are you browsing with IE? Mozilla works much better with Blogger Blogs. You can download Mozilla here. I highly recommend using it.

To get rid of that blogger "B" on your site and replace it with a Super Blog Football, here's what you do:


  1. Go to your blogger dashboard.
  2. click "layout" of the blog you want to change
  3. click "edit HTML"
  4. Back up your blog template saving the file to your desktop(not mandatory)
  5. Find the word "</head>" in the HTML code
  6. Just above </head> put in the following code:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vQhEp6sTN8LjjtlXfAPUAkdfG-9kQKb2U_Hf3PmHNwl6m2Rwnwh4iYnYvOuMrQY32Etiz3Lq0jRXX4bCchdjHM3_3IqGHc4UtcrF0wPeWwYUR2gGm1pFpte1-aeM4RAJK3XsQMrTmB4/' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vQhEp6sTN8LjjtlXfAPUAkdfG-9kQKb2U_Hf3PmHNwl6m2Rwnwh4iYnYvOuMrQY32Etiz3Lq0jRXX4bCchdjHM3_3IqGHc4UtcrF0wPeWwYUR2gGm1pFpte1-aeM4RAJK3XsQMrTmB4/' rel='icon'/>

7. Now click "save template" and view your blog in Mozilla Firefox.


After Sunday, you can switch your favicon to whatever you like. Here's some other ones I made codes for:

Here's a shot of the capitol
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXAAecSgmrV42VJZBqkrTlJoe8Y2EcI0dVbUA4Nboqq04WuUvAo1vvHrKUGUjUXkK14q0sIdprYx9qWlqr4QPV5BH5GztD9kxZZYGyuH776ZmFAGyI15T6ykrngNjeNjPr3PE-sroOGo/s1600-r/capitolfavicon.ico' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXAAecSgmrV42VJZBqkrTlJoe8Y2EcI0dVbUA4Nboqq04WuUvAo1vvHrKUGUjUXkK14q0sIdprYx9qWlqr4QPV5BH5GztD9kxZZYGyuH776ZmFAGyI15T6ykrngNjeNjPr3PE-sroOGo/s1600-r/capitolfavicon.ico' rel='icon'/>

Here's the Gold Man
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HoJZqszvj5VEoc-P22ykBHgsdZ2V8ltmDgaKGInv0lJ1yrCnJ2g5kU5NlJOFp2kbCV69Rm26OYfvdAE2a3NDflfMO5T-cz2UnGRQxjd7lL3uDCCCwgEYhtf0NLpSBsJBSg0JfSR0Qjw/' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HoJZqszvj5VEoc-P22ykBHgsdZ2V8ltmDgaKGInv0lJ1yrCnJ2g5kU5NlJOFp2kbCV69Rm26OYfvdAE2a3NDflfMO5T-cz2UnGRQxjd7lL3uDCCCwgEYhtf0NLpSBsJBSg0JfSR0Qjw/' rel='icon'/>

Here's another capitol shot
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifyhksWrunQ0fd0mKcte5pj1yGjTL4YVNCzVN1XR5r7OAcqmUvnnwSKfrEWBe5tTdrt7qOrTD2x8rmXTmW4RWmwq3q5HYlghw1IjfaeUkHN2YH1sJMzxxtZ17cYBZaPn1R8kiffwgq-o/' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifyhksWrunQ0fd0mKcte5pj1yGjTL4YVNCzVN1XR5r7OAcqmUvnnwSKfrEWBe5tTdrt7qOrTD2x8rmXTmW4RWmwq3q5HYlghw1IjfaeUkHN2YH1sJMzxxtZ17cYBZaPn1R8kiffwgq-o/' rel='icon'/>

You can also make your own custom favicon code.
  1. Just take the picture you want to use and reduce it to a size of 15 by 15 pixels. 
  2. Save the picture as a .png or .gif
  3. Upload it to your blog or Picasa.
  4. Copy the image location of this picture
  5. Replace the red section of the following code with that image location.
<link href='Paste image location here' rel='shortcut icon'/>
<link href='Paste image location here' rel='icon'/>
6. Follow the above instructions for customizing your favicon.
7. Let me know you did it and I will go check it out. eatsalem@gmail.com

No comments:

Post a Comment

Tell us what you think.