Do You Need a Favicon?
The debate is still out whether or not a favicon helps your SEO. Some specialists think it may give you a small SEO boost while others disagree. It does help with your branding and may even build credibility and trust to your site. Apparently it does no harm so let’s create one.
Favicon.cc is a site that allows you to create a free favicon without even registering. Follow the easy instructions:
Create New Favicon> Import Image.
However, before you Import your image you need to create it. In this example I am creating a simple ’45’ for use on my site. I included a black border which was created in Fireworks since the background on Explorer is grey and it shows up better. However, the background on Chrome is black so it doesn’t show at all. You may wish to keep these background colours in mind when designing your favicon.
Create a Favicon
You can create your image in any editor such as Fireworks or Photoshop. Create a square image 200 x 200 pixels. Keep it simple because the final generated favicon for your site will only be 16 x 16 pixels. Save your image to Desktop. Now you’re ready to Import it to Favicon.cc. If the image created is square you can select ‘Keep Dimensions’. Click Upload. You can now edit your image within favicon.cc however if your image was fine in your editor it should not require any further editing. A Preview palette is below which shows what your new favicon will look like preceding a url. Once you’re pleased with the results click Download and save it. Give the file a short name like ‘favicon’. The favicon will be saved as a .ico file.
Install Favicon On Your Website
First, upload the tiny favicon.ico file to your website. In most cases you need to upload the .ico file to your website’s main directory (the public_html folder). It will now appear along your other html files. Don’t put the file in your images folder. Next, insert this code in every one of your html pages you wish to display the favicon:
Replace the favicon.ico file name if you saved your image as something other than ‘favicon’. Insert the code in every page between the Head tags. I put mine immediately underneath the title tags. If you have a dynamic header you may need to insert the code only into the index page. Save and Upload your pages and test. Clear your browser cache to see the new favicons. That’s it!