Create and Add Favicon icon to website

What is Favicon.ico file?

Very first I would let you know what favicon icon is little icon which appear in your browser URL like below image.

favicon icons

Create Favicon.ico

If you want to create favicon icon yourself then you should be familiar with some photo editing tools like Adobe Photoshop, illustrator Paintetc. I am going to create favicon icon using Adobe Photoshop.

Open Adobe Photoshop and Go to File then click on New. It will show you dialog set height and width 32*32px or 16*16px. And then draw whatever you want in favicon icon as I have given LSC short name of my website learnshareconer. You can see in below image.Save the favicon file in jpeg/jpg/png/gif format.

favicon_icon

Go to below link to convert favicon file into .ico file

online favicon converter

Click on Image Upload and then Choose File.Then Click on Create Faviconbutton. It will navigate to next page and show you a link Download the generated favicon . Click on that link and it will automatically save .ico file in your system.

Open your wordpress blog and then upload the downloaded .ico file. And then refresh the browser.It will take 5 sec to deploy and see in your website url. Once it deployed successfully it will look like first image given above.

Add Favicon.ico to .Net website

if you are not using wordpress then copy .ico file and put in root like below image in Asp.net Website.

favicon under root

write one line code in the master pagehead tag like given below image.

favicon icon code in header

 

Happy Coding…

Posted by | View Post | View Group