This tutorial is put in here just for a little fun. It's not that important at this point, but if you browse the internet with most modern browsers you will see a little icon on the browser's bar and tabs next to the title of the page you are on. These little things are called 'Favicons' and I am going to go through how you can make one and put it onto your website.
Here is a icon which can be used for a favicon:
So, lets do this backwards. First I am going to show you how to put it into your site, using my favicon, and the I will show you how to make it.
So, below is the page we have worked on before, with one new line added after the <title> line. This line has a favicon of mine in there, just so you can try it out.
<html>
<head>
<title>Your Page Title</title>
<link rel="icon" type="image/gif" href="http://vernforms.googlepages.com/NonNerd.ico" />
</head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
Lets break down that line a bit:
- Link - This tells the browser that you want to use something from another page in this page.
- rel - This describes the RELATIONSHIP that that page has with this one.
- type - Well, what type is it, of course. No points for guessing that one!
- href - We'll get to this more later, but this links to another page. It is a "Hypertext Reference". Hypertext is all hyper, it wants to reach out somewhere out of your page.
http://vernforms.googlepages.com/NonNerd.ico
This is called a URL (Uniform Resource Locater...if you just needed to know), and it tells you where that file is. This favicon is located on my own Googlepages, which I mainly use just for this kind of stuff. For now, go ahead and just use mine. If you want to use it on a website on the Internet, please feel free. You can download it and stick it on your server...we'll get to all that later. Just do me one favor if you use that, or any other image of mine...give me a link back to this site.
Anyway, if you save that page as is you will now see the little favicon displayed when you load that web page into your browser. So, how do we go about making one of these. There could be many ways, but I will show you with Gimp.
Alright, lets do this step by step:
1. Get Gimp at www.Gimp.org
2. I will assume that you installed everything fine. Then start up Gimp.
3. Go to "File" in the main section. Not in the little Toolbar floating section.
4. Under "File" choose "New"
5. When the "New" dialog box comes up, change the values for the size of the image to 160px by 160px. BEFORE you close, also go down and change the "Advanced Options" and click that to open it up. Go down to where it says "Fill With" and choose "Transparency"
6. The new image opens up. The squares indicate the "transparent" layer.
7. Do what you want. Keep in mind that you will need to keep it simple in order to still see it well when you create a Favicon.
8. Okay, once you have it as you want it, you need to decrease the size. Go to "Images" and look for "Scale Image". Where it says "Width" change the value from 160 to 16. You don't have to worry about the width...you'll see the little change link on the right which shows you that the two are linked (which they are by default...if not, just click it to lock them). Click "Scale" on the bottom right.
9. Okay, now the important part. Save the thing. Go to "File" "Save As" and navigate to the file that you want to save it in. In the name bar, type the file name you want for it, and then end it with a file extension ".ico" so you may want something like "myFavicon.ico" or "I.ico" or whatever. It will ask you about a 32bit compression, just click "Save"
This tutorial was created for use on Gimp 2.6.6 on Ubuntu Linux. If you have another version, you should have no problem following along. It may just require a little more innovation to get the thing working. It is, after all, a rather simple process.
In the next tutorial we will look at perhaps the most important thing about html and the world wide web...LINKS.
This is called a URL (Uniform Resource Locater...if you just needed to know), and it tells you where that file is. This favicon is located on my own Googlepages, which I mainly use just for this kind of stuff. For now, go ahead and just use mine. If you want to use it on a website on the Internet, please feel free. You can download it and stick it on your server...we'll get to all that later. Just do me one favor if you use that, or any other image of mine...give me a link back to this site.
Anyway, if you save that page as is you will now see the little favicon displayed when you load that web page into your browser. So, how do we go about making one of these. There could be many ways, but I will show you with Gimp.
Alright, lets do this step by step:
1. Get Gimp at www.Gimp.org
2. I will assume that you installed everything fine. Then start up Gimp.
3. Go to "File" in the main section. Not in the little Toolbar floating section.
4. Under "File" choose "New"
5. When the "New" dialog box comes up, change the values for the size of the image to 160px by 160px. BEFORE you close, also go down and change the "Advanced Options" and click that to open it up. Go down to where it says "Fill With" and choose "Transparency"
6. The new image opens up. The squares indicate the "transparent" layer.
7. Do what you want. Keep in mind that you will need to keep it simple in order to still see it well when you create a Favicon.
8. Okay, once you have it as you want it, you need to decrease the size. Go to "Images" and look for "Scale Image". Where it says "Width" change the value from 160 to 16. You don't have to worry about the width...you'll see the little change link on the right which shows you that the two are linked (which they are by default...if not, just click it to lock them). Click "Scale" on the bottom right.
9. Okay, now the important part. Save the thing. Go to "File" "Save As" and navigate to the file that you want to save it in. In the name bar, type the file name you want for it, and then end it with a file extension ".ico" so you may want something like "myFavicon.ico" or "I.ico" or whatever. It will ask you about a 32bit compression, just click "Save"
This tutorial was created for use on Gimp 2.6.6 on Ubuntu Linux. If you have another version, you should have no problem following along. It may just require a little more innovation to get the thing working. It is, after all, a rather simple process.
In the next tutorial we will look at perhaps the most important thing about html and the world wide web...LINKS.
