Animated favicon
- musik
- Legend
- Joined: Aug 06, 2003
- Posts: 6892
- Loc: up a tree
- Status: Offline
August 23rd, 2007, 7:43 pm
I recently tried this groovy idea called an animated favicon - it currently only works in FireFox but they say other browsers will follow suit eventually 
Step One: First off to create your animated gif follow these instructions.
Step Two: To create your standard favicon follow these instructions.
Step Three: Then follow these instructions:
Firefox allows webmasters to use animated favicons and it is likely more browsers will eventually follow suit. While Internet Explorer does not support animated icons in any way, there is an easy way to code things so that you can display an animated favicon in supported browsers and a standard icon for all others.
Normally, one could just plop the favicon.ico image in a website’s root directory and it would show up without even the need to add a link to it. To get both icons showing in all browsers, we’ll need to add not just the link to the normal favicon, but also to the animated one.
Create your animated icon 16 pixels high and wide. I recommend calling it favicon.gif and uploading it to your website’s root directory, which should be where your regular favicon.ico file is. Put the code beneath this paragraph anywhere between the <head> tags of your website, making sure the paths are accurate, and you’re good to go. Firefox will show the animated .gif as the favicon, even when the user bookmarks the page, and Internet Explorer and other browsers that do not support it will continue to use the boring non-animated version. Note, if you have a cached bookmark image, it will show it until you clear your cache.
Original tutorial found here
Step One: First off to create your animated gif follow these instructions.
Step Two: To create your standard favicon follow these instructions.
Step Three: Then follow these instructions:
Firefox allows webmasters to use animated favicons and it is likely more browsers will eventually follow suit. While Internet Explorer does not support animated icons in any way, there is an easy way to code things so that you can display an animated favicon in supported browsers and a standard icon for all others.
Normally, one could just plop the favicon.ico image in a website’s root directory and it would show up without even the need to add a link to it. To get both icons showing in all browsers, we’ll need to add not just the link to the normal favicon, but also to the animated one.
Create your animated icon 16 pixels high and wide. I recommend calling it favicon.gif and uploading it to your website’s root directory, which should be where your regular favicon.ico file is. Put the code beneath this paragraph anywhere between the <head> tags of your website, making sure the paths are accurate, and you’re good to go. Firefox will show the animated .gif as the favicon, even when the user bookmarks the page, and Internet Explorer and other browsers that do not support it will continue to use the boring non-animated version. Note, if you have a cached bookmark image, it will show it until you clear your cache.
Code: [ Select ]
<link rel="shortcut icon" href="favicon.ico">
<link rel="shortcut icon" href="favico.gif">
<link rel="shortcut icon" href="favico.gif">
- <link rel="shortcut icon" href="favicon.ico">
- <link rel="shortcut icon" href="favico.gif">
Original tutorial found here
Opportunity To Do - Changing the lives of children around the world.
Rose.id.au - Doing Life.
Rose.id.au - Doing Life.
- Anonymous
- Bot
- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
August 23rd, 2007, 7:43 pm
- Erwin
- Born
- Joined: Feb 14, 2009
- Posts: 1
- Status: Offline
February 14th, 2009, 3:33 am
- ATNO/TW
- Super Moderator
- Joined: May 28, 2003
- Posts: 23404
- Loc: Woodbridge VA
- Status: Offline
February 14th, 2009, 5:29 am
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 3 posts
- Users browsing this forum: No registered users and 63 guests
- You cannot post new topics in this forum
- You cannot reply to topics in this forum
- You cannot edit your posts in this forum
- You cannot delete your posts in this forum
- You cannot post attachments in this forum
