Favicons

Add a favicon to your site

What are Favicons?

A Favicon is a small icon that appears in your web browser address bar to the left of the url and it serves to brand your site(s). Most sites now use favicons and there is no reason your site should not have one also! This is a very simple touch you can add to your sites to make them look professional and develop your site branding.

Here is an example of a favicon:

Example of a FaviconFirst you need to create your favicon. A favicon is a 16×16 pixel graphic, which is very small, so do not try to downsize a large graphic that will lose detail in the process and just appear as a blur in the address bar. There are many good graphics available on the internet for you to use, so type “favicon” in your search bar and check out what is already out there. You  might just find what you are looking for without having to go through the process of creating your own from scratch.

Here are some examples of favicons available on the internet:

FaviconsYou can also use a photo editor to create your own custom favicon and then downsize it to 16x16pixels. A great online photo editor is Pixler. Once you have an image you want to use, be  sure to save it in a .gif .jpg .png or .bmp format. Before you spend a lot of time creating something complex, go to some of your favorite web sites and see what they are using. One or two letters, a heart, a paint brush, a simple logo…

Here are a few example that I like that might serve to inspire you:

Favicon SamplesIf you have found and downloaded a favicon you like, you can skip the photo editing steps and move right to Adding your Favicon to Your Site. If you are going to create your own favicon from scratch, then get to work with a photo editor and be creative. If you have Photo Shop, that is a great tool to use. If not, there is a free online tool which is also excellent called Pixler.  You can find a link to Pixler in the Web Site Tools list on the right column of this page.

Now that you have completed your image and saved it on your computer in one of the required formats (.gif .jpg .png or .bmp), we need to downsize it to the required 16×16 pixels. A very  good online tool for doing that is FavIcon Generator. A link to that site is also on the Web Site Tools list on this page.

Adding your Favicon to Your Site

Now that you have created or downloaded your favicon, it is time to add the icon to your site.

First, upload via FTP your favicon file to your site and put it in the “root” directory, ie:

http://mywebsite.com/

If your site is in a sub directory, the place the favicon there also, ie:

http://mywebsite.com/XmasParty/

Filezilla Screen showing favicon fileMost of the time that should do it. If your welcome page is named index.html or welcome.html it probably will work. Go ahead and test it out (go to your website and see if the favicon shows up in your browser), and if it does, you are done. If not then you need to edit the html of your welcome page. Don’t be discouraged, it does not require extensive editing or any real knowledge of html.

Note: You must use a plain text editor! Do Not Use word processing software such as Word because word processing software adds a lot of formatting code that you do not see and that will really make a mess out of your web page! Software like Word is great for what it was designed for, but this is not the application for such software.

For Windows users, Notepad++ is the perfect software to use. For Mac users, Text Wrangler is great.  You will find links to both of these pieces of software on the right sidebar of this page under Web Site Tools.

Open your welcome page and in the HEAD section of the page insert the following text:

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

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

This line needs to be inserted in-between the <head> and </head> tags:

————————————————————————–

<head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

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

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

<meta name=”Generator” content=”iWeb 1.1.2″ />

<title>Xmas-2011</title>

css” media=”screen” href=”Xmas-2011_files/Xmas-2011.css” />

src=”SlideShow_assets/openSlideShowWindow.js”>

</head>

————————————————————————–

That’s it! We have a favicon on our site.

Xmas Favicon

You can find links to all the sites mentioned on this page in the right hand column of this page under Web Site Tools.

Leave a Reply

Your email address will not be published. Required fields are marked *