0 What is Social Engineering

Social Engineering is a collection of techniques used to manipulate people into performing actions or divulging confidential information. Things aren’t always what they seem. So please engage your mind before you open your mouth and act. Always check a caller’s identity before leaving any confidential information.

0 Know More about Favicons

        A Favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16x16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's Address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title. The Microsoft Windows Shell also uses favicons to represent "Internet shortcuts" to web pages.

        The original means of defining a favicon, introduced in Internet Explorer 5, was by placing a file called favicon.ico in the root directory of a web server. This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created using HTML to indicate the location of an icon for any given page. This is achieved by adding a link element to the section of the document as detailed below. In this way any appropriately sized (16×16 pixels or larger) image can be used and, although many still use the ICO format, other browsers (though notably not Microsoft's Internet Explorer) now also support the PNG and animated GIF image formats.

Facts about Favicon

        However, later versions of Microsoft Internet Explorer only truly support icons that have a legitimate extension of Microsoft Icon Files and that are coded in the icon file format. Many webmasters have changed their preferred image's extension to .ico without first actually converting them to Microsoft Icon Files. This creates a conflict that Microsoft Internet Explorer cannot resolve; such icon images will not be displayed.
Most modern browsers implement both methods of Favicon support.

Standardization Of Favicon

        The original favicon feature was created by Microsoft for Internet Explorer which would request a favicon from a set URL (/favicon.ico) in the root directory of every website. Microsoft's supported format for the link tag did not conform to the World Wide Web Consortium (W3C) HTML recommendation because:

• The rel attribute must contain a space-delimited list of link types, so a two-word link type would not be understood correctly by conforming web browsers. (viz. rel="shortcut icon")
• The ".ico" file format (a raster format used for icons on Microsoft Windows) did not have a registered MIME type and wasn't likely to be automatically understood by most web browsers. In 2003, however, the format was registered with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon, eliminating the first part of this problem.
• The use of a reserved location on a website conflicts with the Architecture of the World Wide Web and is known as link squatting or URI squatting.

In addition, older versions of Internet Explorer only recognized the favicon when the page was bookmarked, and failed to when merely visiting it. The Mozilla web browser added support for favicons in a way that conformed to web standards through the use of rel="icon" and letting web designers add favicons in any supported graphics format,
e.g. <title><link rel="icon" type="image/png" href="/path/image.png"/></title>
Most web browsers have since added support for this feature, and it is generally used for all new content.

4 How do I add Animated Favicon to my Blog

        Did you ever wonder about the little tiny animated favicons displayed at the address bar of the browser? With help of animated gif image format we can easily implement animated Favicon.
While dealing with animated Favicons You should keep the following useful things in mind.

• Only animated gif image format can be used as animated favicon. No other formats will do the trick.
  
• Currently, Only Firefox and Opera support animated Favicons(animated gif Favicons). Even though Google chrome renders gif images, it will display only first frame of the gif, Hence there will not be any animation effect.
  
• IE, still most popular browser, who introduced the concept of Favicons, still having support only for .ico format even with its recent version IE8 and hence it will not render animated favicons at all.
  
• Favicon should be a distinguishing feature of your site, so I suggest selecting a unique Favicon.
  
• Preferably Favicon should be in square shape.
  
• Preferable size of Favicon is either 16x16 or 32x32
  

See How my animated Favicon displayed by Google Chrome

I will suggest, add an image with .ico format as your Favicon, and then override that Favicon with the animated .GIF image. By doing so, you will be able to display your Favicon in the browsers which are currently not capable of rendering animated gif as favicon, and you can show your animated favicon in the browsers which is supporting it.

Adding Favicon to your blog by editing blogger Layout

From the blogger Dash board-->Layout-->edit HTML
<title><data:blog.pageTitle/></title> Find this code in the edit HTML page (refer screenshot). Just below this code add the code snippet given below.

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

On adding this script, please replace the 'URL of your icon file' with the correct URL of your Favicon.
Once you have this script ready, save the template and check your blog, your Favicon should be loading fine. When you refresh your blog, you should see your nice little animated Favicon just before the blog address.

0 How to add Favicon to a Blog

        You may have seen small image appearing on the leftmost side of your browser's address bar when you browse, and it is differing from site to site. That tiny image is termed as Favicon which is the short form of Favorite Icon. Look at the screenshot of the Google’s webpage. Find Google’s Favicon here.

        Now look at your blog, Did you see a Favicon there? Every Blogspot blog, by default recieves a Favicon as shown below.

        In fact, this Favicon belongs to the Blogger, on which your blog is being hosted. As part of giving more unique and professional look and feel to your blog, you may need to add your own Favicon. Today almost every web site has this distinguishing feature- Favicon

        Did you ever notice my Favicon? At least now you may be noticing the tiny animated icon appearing on the address bar. This blog also is a Blogger or blogspot blog; even then I am having my own Favicon. How is this possible? I will explain you in details about “How to add my own Favicon to my blog?”

How to add custom Favicon to a Blogspot Blog?

        It is very easy to add a Favicon into self-hosted web pages or Blogs. But in the case of free hosts like Blogspot blogs or BLOGGER blogs the procedure will be a bit tricky as you have access only to the blog layout but no file upload features.

I will explain the entire procedure in easy steps, so that even a newbie can add a Favicon to blog very easily.

1. Upload your image File and get the URL

        Hope you have uploaded your image file to some web locations and you have its URL. Otherwise learn how to upload files for blogs hosted in blogspot or blogger domain

2. Edit the layout of Blogger

From the blogger Dash board-->Layout-->edit HTML
<title><data:blog.pageTitle/></title> Find this code in the edit HTML page (refer screenshot). Just below this code add the code snippet given below according to your picture format.

1.ico pictures

In the case of .ico picture formats you can use either of the code snippets. But former is preferred as its having more number of browser compatibility

<title><link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/></title>

<title><link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/></title>

2.png pictures

For adding .png picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

3.gif pictures

For adding .gif picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

On adding this script, please replace the 'URL of your icon file' with the correct URL of your Favicon.
Once you have this script ready, save the template and check your blog, your Favicon should be loading fine. When you refresh your blog site, you should see your nice little Favicon just before the blog address.

7 How do I hide the navBar of my Blog

        Did you ever notice a bar on the top of your blog as shown above? This is called the 'Navigation Bar' also known as 'Navbar'. Did you ever feel this NavBar of the blogger very irritating? Did you ever think of "How do I hide the NavBar of my Blog"
        Every blogspot blog by default recieves a Navigation Bar on the top, with buttons for switching to the next blog, searching yor blog and more. Some bloggers may find the Navigation Bar useful, But most of the bloggers may feel it irritating. If you feel that disabling the navigation bar would improve the layout of your blog then You may want to disable it.
        Blogspot is not giving you any options for hiding or disabling the so called 'NavBar', there is no menu entry to disable it, But you can still hide it.

Disabling the Blogger NavBar: Detailed Steps

Dashboard--> Layout--> Edit HTML
In the edit HTML text field, find the style defenitions( which is enclosed in { } brackets).
Then paste the below given code somewhere near other style defenitions.

#navbar-iframe {
height:0px;
visibility:hidden;
display: none !important
}

In this method, we are not particular about the position of the code pasting. Kindly refer the screen shot shown below.

In my personal experience this is a perfect hack. After these changes click on the save template button, reresh the page. If there is no navigation bar in the screen, then the Hack is perfect. Check out with all the leading browsers (atleast Internet explorer, Mozilla firefox, Safari and Google chrome).

Explanations

<style>...</style> encloses stylesheet instructions that define a page's layout. The actual layout instruction is now targeting the element of the ID navbar IFrame, which you define to not display. The !important tells the browser to override other layout defenitions for this element, if exists.

Exceptions

If there is still the navigation bar exists(hopefully it won't happen), perhaps Google has since adjusted the way their page design displays the navigation bar. If so you may need to read the HTML source code of you blog and adjust your stylesheet instructions accordingly.

Not For Newbies

The blogger navigation bar is also disabled when using FTP to transfer the blog pages to your own domain, because the navigation bar includes many elements that work only in the context of a blogger hosted blog.
However,FTP publishing(Dashboard-->Settings-->Publishing) comes with its own set of disadvantages, so a move must be carefully planned.
Please make a note that in order to switch to FTP uploading , Your blog must be public and use a classic template.
You can set your blog to be public via Dashboard-->Settings-->Permission
You can set your template to classic via Dashboard-->Settings-->Edit HTML