Favicon for Your Site Dummy Guide
Today I did a favicon for my blogger, so I am going to share with you on how to create a favicon for your site, whether it is your blogger or personal hosted site.
Look up at your browser tab – do you see my favicon? Some of you regular internet users would probably have noticed the favicons as you surf the internet, but may not know much about it or why it is there except that it is. So let me share with you a little bit on that before we start creating one for your site.
What is a favicon?
A favicon is a little image that you see associated with a site. It is a special file that ends in an .ico extension.
The standard favicon is a graphic 16×16 pixels square, although more recently, it is also served as 32×32 pixels in specific browsers, e.g. Windows 8: IE10 Metro.
You can use a favicon with any site on a web server that allows access to the root directories.
Depending on the browser support, it typically displays in
the browser’s address
next to the page’s name in bookmark listing
next to the page’s title on the tab
It is short for favourite icon or better known as
- Website icon
- URL icon
- Bookmark icon
- Tab icon
First released by Microsoft for IE5 in 1999, it was later on standardised by the World Wide Web Consortium.
For those who would like more understanding of the technical aspects of a favicon and browser implementation, please refer to
Wikipedia.
Why use a favicon?
Sites without a favicon will show a little blank page icon. With a favicon, your site will stand out earning you
- Site/Logo Branding
- Instant Site Recognition
- Quick Recall from Bookmarks
- Added Professionalism
Creating a favicon
Now the fun begins. Making a favicon has never been easier with many free icon generators available online. It can be done in just a two simple steps:
- Create and design your image or just pick a favourite photo or image. (Keep your graphic design simple. Ensure you image is square. Recommended minimum size of 144×144 pixels).
- Convert your image into an ICO file and save in your computer/system. You may use any of the favicon generators below:
Installing Favicon into Blogger
1. Use the Blogger main menu > Layout.
2. Locate the Favicon gadget and click Edit.
3. Choose File to upload your created favicon.ico.
4. Click Save.
You have now successfully installed a favicon for your blogger. To change your favicon – just repeat the same steps to edit anytime.
Installing Favicon onto your website.
- Access your website’s file manager and upload .ico file to your website’s main directory (public_html folder).
- Insert the code below into every page of your html files between the <head> and </head> tags unless you have a dynamic header, in which case, you just need to insert the code into the index page:
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>
Note: Replace favicon.ico if your .ico file is named differently from favicon.ico
E.g. If you have named your favicon.ico as xyl.ico, then the link should look like <link rel=”shortcut icon” type=”image/x-icon” href=”/xyl.ico”>
- Save and check the site by visiting online to view your favicon. You may need to clear your cache or wait a day or two before it appears correctly.
Moved from http://mimilow-internetmarketing.blogspot.com.au/2013/10/my-blogger-dummy-guide-favicon-for-your.html
