HOW TO ADD A CUSTOMIZED ICON TO YOUR WEBSITE'S ADDRESS BAR.

Discussion in 'WEBMASTERS' started by Dani, Jan 31, 2018.

  1. Dani

    Dani Administrator Staff Member

    You can give your Website that branded look it deserves by customizing an Icon in front of your address bar to make it stand out from the crowd.

    upload_2018-1-31_8-14-53.png

    The process of adding an Icon to your address bar is relatively easy as I will be explaining it in the next few steps:

    STEP 1: Get any picture of your choice that you intend using as an icon for your website address bar. The ideal picture should be 16 by 16 pixels which must be converted into an icon file you can do this by using any photo editing software like paint, Gimp, adobe Photoshop or any other but I would recommend doing it online by clicking here

    STEP 2: You will be redirected to another website, where you can upload your picture , the site will crop it for you and convert it into an Icon file. Then you can save it on your PC.

    upload_2018-1-31_8-36-2.png

    STEP 3: After saving the file to your PC , then login to the cpanel of your web server and copy the favlcon.ico file into the root of your website.

    STEP 4: Now edit your website's HTML file by Adding the following HTML tags in between the <head> and </head > tags of your web page

    upload_2018-1-31_9-24-22.png

    You can do this using several HTML editors but I prefer doing it directly in google chrome. This is how I do it on Chrome :
    1. Open google chrome , look for Tools or more tools and locate Developer tools, click on Elements tab then click on the arrow in front of the <head> tag to collapse it:

    upload_2018-1-31_9-53-34.png

    2. Right click on the <head> tag and select the Edit as HTML option

    upload_2018-1-31_10-5-53.png

    3. Type in the code earlier stated or copy and paste the code in between the <head> and </head> tags

    upload_2018-1-31_10-10-37.png

    4. Close the Editor and refresh your site. Hopefully, everything should work out fine. :)
     

    Attached Files:

Share This Page