A favorite icon or “favicon” is the little icon that shows up in the URL bar of your web browser when you visit a site on the web. It also shows up in your list of favorites next to each site you’ve saved, at least until you clear your cookies and internet cache. For this website I’ve made a little favicon that looks like a piggy bank, can you see it up there?
So how do you get your own favicon? Before I answer that it’s important to let you know that some newer browsers and operating systems accept tiny favicons (16×16 pixels) in addition to shortcut icons that can be larger (usually 100×100). These bigger icons are often used for desktop shortcuts or browser history menus. So when you make your favicon you should also make one of these to improve the way people interact with your site.
Here’s how I create my favicon and shortcut icons:
- Use Photoshop or some other image editor to create a 100×100 pixel graphic. I like to save it as a .png file with a clear background and I name it favicon.png
- Visit Dynamic Drive and use their free Favicon Generator tool to upload the .png from step 1
- Press “Create Icon” and then download the favicon.ico file that is created automatically
- Now use an FTP program to upload both of these files to the root directory of your website
- Add the following two lines of code to the header of all of your web pages, this is what tells the browser how to find and use the icons you created:
<link rel=”icon” href=”http://tutorialsave.com/favicon.png” type=”image/png” />
<link rel=”shortcut icon” href=”http://tutorialsave.com/favicon.ico” type=”image/x-icon” />
So the steps are really three main parts, create the two icons, favicon.png (100px) and favicon.ico (16px), upload them to the root directory of your site, add the two lines of code to your header. This is sure to impress visitors and give your site a more professional edge.