A Favicon is that small icon that appears in your browser on the address bar or maybe on a open tab in your browser. They are also found in bookmark menus etc. To show you what a Favicon is, I will show you some images of where they show up!:
Now seeing these images above you may have noticed them before but did not know they were called a favicon.
Is a Favicon important?
In my eyes yes, a favicon takes it's part in representing your site. Many sites usually have there logo image or mabye intials of there website name in there favicon, so I think yes a favicon is important because it represents your website. And it's better than the default favicon browsers generate if there is not favicon present!
Is a Favicon required?
I did say a favicon was important but no it's not required in the terms of your website woudln't work without one. It's simply a icon image so it can effect any technical stuff on your website. But maybe your thinking, damn! I want one of these sweet Favicons? Well your in luck, we're going to guide you on creating your own favicon!
Creating a Image (Part 1)
Creating a favicon isn't as hard as it sounds, you don't need to be some massive graphics expert or anything like that. The creation of a Favicon can be as basic as you like. You can create your favicon in various types of image software such as, MS Paint or Photoshop. Once you have your software ready you need to know how to create one, follow the guide below:
1. Create a 16 x 16 pixel document (You might want to zoom into your document as it's quite a small workspace)
2. Create a Favicon that represents something to do with the image of your website (You of course don't have to but, Favicons related to your website are a good idea!
3. Once your happy with the Favicon you have, save it as a normal image type (png/gif/jpg etc..)
Converting your Image File (Part 2)
Right now you have some sort of image which you have made. But it's only a image file at this point. It is not yet a Favicon because it has not been converted. Favicons must be in a file format called .ico this file type is the only one that a browser can read as a Favicon. Using a standard image won't work. You will now need to convert it.
There are plenty of online website that can convert images into favicons in seconds. To save you some time and I guess for simplicity, I'll link you to a few:
All of the Favicon Generators do virtually the same job, regards of which one above you choose the principle is still the same, simply look for a area that says upload your favicon or create your favicon, and the websites fill you on how to upload the image file.
Save your Favicon and make it show up! (Final Stage)
The uploader will convert your image file into something called a .ico file. Your image is now a Favicon, Congratulations, but you need to make sure you save the generated .ico version onto your computer. It's important you save it as usually websites delete the .ico files generated after a short time so don't hang around and save it to your own computer!
So now you have your favicon but how do you get it to show up on your browser address bar/tab? Assuming you now have a copy saved on your computer you will need to upload it to your own webspace. I'd recommend uploading it to the same directory as you index.php page (homepage) so it can be found easily. But wherever you choose to upload it is up to you. During this bit make sure your favicon file is named just favicon. Some generators will have added random numbers at the beginning of your favicon file so make sure you take them out and change it to just favicon
Now you've uploaded the favicon.ico we now need the code to make it show up, the code is below:
| <link rel="shortcut icon" href="http://pulsegfx.net/favicon.ico" type="image/x-icon" /> |
You would of course modify the href part to the location of your favicon. However I do recommend you add in your full website address as well as the loacation of the Favicon like so:
| <link rel="shortcut icon" href="http://pulsegfx.net/favicon.ico" type="image/x-icon" /> |
Once the code is modified to your needs, you need to place it onto your page. This code goes between the meta tags. I have drawn up a mock website code to show you how it goes:
| <html>
<head> <link rel="shortcut icon" href="http://pulsegfx.net/favicon.ico" type="image/x-icon" /> <title>Favicon Tutorial (Pulse GFX) </title> </head> <body> </body> </html> |
Simply place it between the meta tags and enjoy! Make sure the location of your Favicon is correct and you should be fine!
Favicons can take browsers a few hours to identify, in some browsers your favicon can appear instantly in others it may not. Give your browser time to recongise the Favicon and you should see it soon enough!
