1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

General [TUT] Creating & installing a Icon in browser(Favicon)

Discussion in 'General' started by chimpy, Apr 8, 2010.

Tags:
  1. chimpy

    chimpy Banned

    Okay Girls & guys today I am going to show you how to install and make a favicon to go into your browser. I apologise if someone has posted this demo before I had a quick look and didn't find any so please delete if so.

    What is a Favicon?
    A favicon is a tiny icon that appears in the tab of a website in everyone's browser. For example please look at this picture, the arrows are pointing to the icon.
    ​

    [​IMG]
    Creating a Favicon
    Basically you need to find a small image you like and rescale it to the size 16px by 16px and save it in a png format under the name of "favicon.ico". Now if your using photoshop you can download the attached plugin to save it as ".ico". For those that don't have photoshop you can go online to Convert Hub - Online Image Converter Converts between Image Formats for Free! and covert your image to .ico.
    ​

    Installing the Icon
    Now go to your control panel of your host and select "file manger" or use livezilla, which is easier. Upload your .ico icon to the root of your directory's, for example wherever you find the files "index.html" etc. Now go to your browser and type "http://www.yourwebsite.tld/favicon.ico - Of course replace your website there and change the tld to your ending as in .com/.org/.net etc. If your pic appears than that means you have put the icon in the right place, if not double check where it is.

    Now getting the icon to show up(this is a little tricky) - Go back to filemanger or filezilla and select your "Index.html" file, edit it and search for "<head>" put this after it:
    Code:
    <link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link  rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    A cannot see my icon in the browser?
    This is a easy problem to fix, press F5 on your keyboard and it should display.

    Hope this help peoples! Or bots :D If there are spelling errors than yea feel free to point it out :D
    ​

    ​




    ​
     

    Attached Files:

    chimpy, Apr 8, 2010
    #1