//make posts preview with a thumbnail

Monday, June 24, 2013

How to create a favicon for your website

Many sites on the internet now add a Favicon to their website. It's a small image next to the browsers address bar that indicates your website. It's especially useful when your site gets bookmarked, because the favicon will show in the bookmark list of your guest. In this article I will walk you through on how to create a favicon for your website that will look cool, make your site more memorable, and separate your from the rest.  This guide shows you how it should look on all of the major web browsers like Chrome, Firefox, Internet Explorer.

Chrome                                                                                     Firefox


create a favicon for your site, chrome


how to create a favicon for your website


Internet Explorer


how to create a favicon for your website



 Step by Step - How to Create a


 Favicon for your Website


First, you'll have to create an ICO file. There are several options you      can use to create one. Just choose one to create the file.

1) If you have Adobe Photoshop, you can use this ICO plugin for Photoshop. Download the ICO (Windows Icon) Format and extract the ZIP-archive. Next, put the plug-in called ICOFormat.8bi in the following directory;

64-bit plug-in: C:\Program Files\Adobe\Adobe Photoshop CSX (64 bit)\Plug-Ins
32-bit plug-in: C:\Program Files(x86)\Adobe\Adobe Photoshop CSX\Plug-Ins

 

1b) If you have a Mac download the appropriate plugin depending on your version of Adobe CS and run the dmg file that gets downloaded and put the ICOFormat.Plugin into this directory

\Applications\Adobe Photoshop CSX\Plug-Ins

2) Now start up Photoshop and create a new file with the width and height of 16 x 16 pixels.

2a) Unleash your designing skills and create a Favicon and when you're done, go to "File", "Save as..." (Shift + Ctrl + S).

2b) Name your file "favicon.ico" and set the format to "ICO (Windows Icon) (*.ICO)" (Skip to step 4)

3) If you don't Have Photoshop Download MicroAngeloMake-Icon or any other program that'll let you create ICO files (*NOTE*: You'll have to buy these programs).

3a) Go to this website where you can upload an image and let the website create an ICO for you. Save this *.ICO file to your local harddisk.

4) Next, when you have your favicon.ico file, put it in your website root (same folder where your index-page is located). Now edit the content of that index-page in your favorite editor.

  • In the HEAD section of your index-page (between <HEAD>...</HEAD>), put the following HTML code:
    <LINK REL="SHORTCUT ICON" HREF="favicon.ico"/>



That's all! Make sure you update your index-page on your host and there you have it; your very own favicon on your website.

5) If you are using Wordpress rename the favicon.ico to like favicon2.ico or it could be named favicon.png or favicon.gif and this file will be located inside your /wp-content/themes/%themename%/images folder and then upload your favicon in the same format that it was originally in whether it was PNG, GIF, or ICO extension.

*Overall note:* The ICO file extention format was normally used by Internet Explorer 6. With modern browsers, you can also use PNG and GIF, but if you want to be sure it'll work, just use the ICO extension.

 

5 comments:

  1. Another great incentive for business intelligence users is that you can get immediate answers to your business questions. You can make quicker decisions based on these responses without having to go through pages and pages of written reports and lose valuable time.

    ReplyDelete
  2. Use a good mix of keyword phrases when writing your content. This will allow you to anticipate differences in users’ understanding of your topic and Internet searching skills. Users who know little about your website topic will probably search for different keywords than users who are well-versed in the same topic.

    ReplyDelete
  3. Telephone systems and emails are the most common ways to make calls and process them in businesses especially the small ones, so having a full-fledged system to handle ever professional aspect is not easy. So the foremost thing to do is to check caller id message when making outgoing calls.

    ReplyDelete
  4. Easy access to the data. For years, businesses have gathered transnational data from numerous software systems and compiled it in an effort to improve their business processes.

    ReplyDelete
  5. Telephone systems and emails are the most common ways to make calls and process them in businesses especially the small ones, so having a full-fledged system to handle ever professional aspect is not easy. So the foremost thing to do is to check caller id message when making outgoing calls.

    ReplyDelete