Thursday, February 3

Please complete Assignment 1 when class begins.


Assignment 1


Last week you explored gadgets on blogger.  You added gadgets to your blog.  Please create a blog post about bloggers gadgets.  What gadgets did you find/explore?  What gadgets did you add to your blog?  What are the benefits of adding gadgets to your blog.  Please give directions on how a person can add their own gadgets to their blog.



Today's topic:  Favicon


How can one miss the Blogger logo in orange and white, which happens to be its default favicon for any blog. But have you thought of customizing your own favicon and display it in your blog. Adding your own favicon is not just branding your blog but also adds up some sense of professionalism too.




Add a custom favicon to your Blogger blog: "What is a favicon?


The word “favicon” is short for “favorite icon”, and is a 16x16px square icon which is associated with a website (or blog).  Browsers which support favicons will usually display a website’s favicon in the address bar (to the left of the URL), and next to the page’s name in a list of bookmarks. Browsers which support tabbed navigation (such as Firefox and IE8) will also display the favicon next to the page title on each tab."




Bloggers favicon is to the left of the URL


Before creating your favicon some of the basic points you should keep in mind is that your favicon icon have to be a small image of size 16 x 16 pixels and with an .ico extension. However, you can also use .GIF and .PNG in this case. A very easy and time saving step in creating your icon is to go for one of the free services such as:


FAVICON WEBSITE CREATORS

Alternatively you can download a “ready made” favicon from these sites:

HOW TO CHANGE YOUR FAVICON


Favicon

Add the reference for your favicon to your Blogger template

The final step to creating a custom favicon for Blogger is referencing the favicon in your Blogger template code.


To do this, go to Layout>Edit HTML in your Blogger template. You do not need to check the “Expand widget templates” box.


Search for the closing </head> tag in your template using your browser’s search function.
Immediately before this line, paste the following section of code, substituting YOUR-FAVICON-URL for the URL where your favicon is hosted:
<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>


Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address and in the bookmarks folder (if you have bookmarked your site).
Noteit is very important that you paste the favicon tags just before the closing </head> tag, not earlier in the template code. This is because Blogger generates favicon tags when your blog pages are generated which would otherwise override your custom favicon references.



No comments:

Post a Comment