Fab Cardsd32er 5424v
New Member
I hope somebody can help, how do I make a favicon?
Many thanks
Many thanks
How do I make a favicon?
- Thread starter Fab Cardsd32er 5424v
- Start date
1) First off create an image 16px X 16px in size (72dpi), and yes, it is really small :icon_smile:
To be honest you can't really draw much in such a small area so the simpler the design the better.
2) Next save it as a .gif, then visit a FREE site like: Favicon Generator and Gallery
Upload your file, select 16x16 and click the generate button. Save the file which will be a .ico extension, if it hasn't already been named favicon ensure that it is.
3) Upload the file favicon.ico to the root directory of your website.
4) Most browsers will pick it up automatically, however, to make sure add the following tag to the <head> section of any page you want it to appear on.
If you only add this code to your index/home page then if a customer/browser visits one of your other pages without landing on your index/home page first, for example via a direct link on a search engine, then it won't display so my recommendation is to add the code to the head section on all of your pages.
Here's ours:
Hope that helps, as always any problems do not hesitate to ask.
To be honest you can't really draw much in such a small area so the simpler the design the better.
2) Next save it as a .gif, then visit a FREE site like: Favicon Generator and Gallery
Upload your file, select 16x16 and click the generate button. Save the file which will be a .ico extension, if it hasn't already been named favicon ensure that it is.
3) Upload the file favicon.ico to the root directory of your website.
4) Most browsers will pick it up automatically, however, to make sure add the following tag to the <head> section of any page you want it to appear on.
HTML:
<link rel="shortcut icon" href="http://www.yourdomainname.co.uk/favicon.ico" />If you only add this code to your index/home page then if a customer/browser visits one of your other pages without landing on your index/home page first, for example via a direct link on a search engine, then it won't display so my recommendation is to add the code to the head section on all of your pages.
Here's ours:
Hope that helps, as always any problems do not hesitate to ask.
Just out of interest, if anybody else has designed some good favicons then lets see them. My personal opinion is that they are really simple to do and they are a nice finishing touch to any website.
Some famous favicons:
My Space
Yahoo
Face Book
You Tube
Some famous favicons:
My Space
Yahoo
Face Book
You Tube
Pixels Ink
Member
I downloaded the file format for photoshop so i can save directly from that.
You can download it from here:
.ico plugin
I created an animated one for my website (only visible in Firefox though)
You can download it from here:
.ico plugin
I created an animated one for my website (only visible in Firefox though)
Cheers Col
What a great plugin which is now installed.
You have a very cool favicon, just to let you know that the animation is also visible in IE7 above although from what I can see it is not on an indefinite loop so rotates a few times and then stops.
However, when I visit your site in IE7 it doesn't display at all, on checking your code you have not added a link to it anywhere in the <head> section which should sort it.
What a great plugin which is now installed.
You have a very cool favicon, just to let you know that the animation is also visible in IE7 above although from what I can see it is not on an indefinite loop so rotates a few times and then stops.
However, when I visit your site in IE7 it doesn't display at all, on checking your code you have not added a link to it anywhere in the <head> section which should sort it.
Pixels Ink
Member
oh, thats cool that it shows in IE7 then 
It should loop about 8 times, no worries if it doesn't I suppose
It should loop about 8 times, no worries if it doesn't I suppose
Pixels Ink
Member
Just to say, to create the animated one, create an animated gif and upload it to your websites root directory then edit the file extension from .gif to .ico
Simple.
You can even have the animated gif bigger than 16px x 16px as it will just be scaled down automatically. However, I find if you scale it frst in photoshop you get a better result.
Simple.
You can even have the animated gif bigger than 16px x 16px as it will just be scaled down automatically. However, I find if you scale it frst in photoshop you get a better result.
Can't believe we're discussing favicons on a Saturday, I'm off down the pub :icon_biggrin:
Pixels Ink
Member
haha. I have a 21st that i'm off to in about 2 hours, then i'm DJ'ing from 7pm - 3am.
If I don't post now there isn't a hope in hell of me being able to do it tomorrow
If I don't post now there isn't a hope in hell of me being able to do it tomorrow
webdesignernew
New Member
Thats really good advice, I have seen some really good animated favicons at the minute, but didn't realise that you didn't have to make them small like usual but will take on board what you have said.
thanks also
thanks also