It seems that more web designers than not have given up on trying to make the favicon work for them. After more attempts than I can count, I have finally found the correct process and code to ensure that my favicon will appear consistently across browsers, and will not disappear intermittently from Internet Explorer.
Following is a quick tutorial that will simplify using a favicon on your sites.
1. Create the image you want to use for your favicon. This should be a square image that is larger than 16px square and can be a jpg, gif, png or bmp.
2. Use a favicon generator like this one offered at dynamicdrive.com to convert your favicon into the favicon.ico format you will need.
3. Insert the following code into the head area of your html.
<link rel=”icon” type=”image/gif” href=”/yourdir/filename.gif” /> <!–[if IE]> <link
rel=”shortcut icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon” /> <![endif]–>
4. Replace /yourdir/filename.gif with the location of your original favicon (before conversion).
5. Save the favicon.ico that was created in the favicon generator to your root directory. This is very important; If it is not placed in the root directory, it will not work in all browsers.
And that is all there is to it. Good luck with your favicon.
As a newer graphic designer, I spend countless hours searching through tutorials and books and code. I’m usually looking for a way to implement a specific idea that I have or just the tools to use something that seems standard.
I am always so grateful when I find the one piece of information that tells me, in simple terms and organized copy, exactly what I have been searching for.
That is exactly what I hope to bring with this blog to any of you out there searching.
So, when I figure out those bits and pieces that I find so valuable, I will share them with you and hope that you might save a little time by finding it here first.
I look forward to sharing what I find with you all in future posts.