How To Create And Install A Favicon On Your Website

upload free favicon to your website

Create free favicon at favicon.cc

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 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.

Create A Favicon

You can create your image in any editor such Fireworks or Photoshop.  Create a square image about 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 you 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:

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

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> and </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!

 

About Ken

Ken Hook is a Partner with 45 Degrees Latitude Digital Filming & Production Co. He is a Videographer and an Apple Certified Professional Video Editor, FCPX. Versed in website development and SEO, Ken helps businesses combine video with the web.
This entry was posted in SEO, Tips and Tricks and tagged , , , , , , , , , . Bookmark the permalink.