Favicons

Favicons

Ever notice the tiny images at the top of a webpage to the left of the URL?  They are basically little graphics that are associated with a website and you’re going to learn how to do one for yours.  It’s easy and fun!

First, you must design your favicon in some kind of image editor such as Photoshop.  You might also be able to find free favicon generators online. Try this website: http://www.favicongenerator.com/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width).

Your favicon must be 16 pixels by 16 pixels.

I have created a few for you to use as an example today.  Simply right click on the one with your initial and save it in your folder.  You must save it directly in your own folder or it won’t work!

Notice that each image is a jpeg.  You must know the file name and extension in order for this to work.

Example: Jfavicon.jpg

You will insert the following code into the <head></head> section of your HTML file:

<link rel=”icon”
type=”image/jpg”
href=”Jfavicon.jpg”>

Obviously, you must replace the file name with yours (Cfavicon.jpg, whatever).

Save your Notepad file and refresh your page to (hopefully) see your new favicon.