How to create an animated favicon

What is a favicon?

A favicon (short for “favorites icon”), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers —such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, iCab, AOL Explorer, Epiphany, Konqueror, and Flock—can then make use of them. Browsers that support favicons may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface.

Guidelines

The following are guidelines for displaying a favicon on your website:

  • The link elements must be inside the head element (between the opening and closing head tag) in the HTML.
  • The image can usually be in any image format supported by the web browser, the major exception being IE, which only supports ico.
  • The .ico file format will be read correctly by all browsers that can display favicons.
  • Use the appropriate color depths (ICO: 16X16;4, 8, 24 bpp—i.e. 16, 256 and 16 million colors GIF: use 16×16 in 256 colors PNG: use 16×16 in either 256 colors or 24-bit).
  • I have found that you do not have to place html on your website.  You can just place a favicon.ico in the root directory of your website, but it may take longer to show up in some browers.
  • Creating an animated favicon

    Animated favcons are easy to create.  After following the guidelines from above, you just need to create an animated gif and rename it: favicon.ico.  It is currently not supported in Internet Explorer.

    Examples of sites that have animated favicons:

6 Responses to “How to create an animated favicon”


  • You can create animated favicon at animatedfavicon.com
    There is just three steps

  • All the download links for the Photoshop plugin file seem to be down, so I uploaded it here for all to download.

    DOWNLOAD PHOTOSHOP FAVICON PLUGIN HERE

  • PLEASE do NOT use animated favicons! This is incredibly annoying for your users and will just make them go to another site!

    PLEASE NOTE animated favicons ALSO animate in the UI tab in FireFox and this is HUGELY distracting and annoying.

    It will make users target your site as an annoying site to close immediately.

    Please Please use common sense, do NOT use them.

  • @linewbie: Although almost all new browsers accept favicons, only Firefox accepts animated Firefox. You can store the favicon.ico in the root indeed, but when you add it to the HTML you have more flexibility.

    I have just launched a concept with animated favicons. I’ve created six animated favicons (different favicons for different tabs/areas, this is the advantage when you use HTML), integrated with my (own) personal brand strategy. That implies that my face is shown, including attributes. On opening a page (or bookmarks) they are standing still, actually 80% of the time (to avoid irritation). After a little while, a sometimes funny, movie is played in the favicon.

    Here’s the site and a posting with lots of background info:
    http://www.erwinvanlun.com/ww/full/animated_favicons/
    u?

    For the next step I consider let the favicon ‘play’ with the title or starting a sound, because with javascript you can do even more. That would be great. But it should all be very subtle, as lots of animated favicons all the time will soon irritate.

    I’m interested in what you think!

  • lHvdHC xgbbmhdtzbdn, [url=http://wbcmszpmjlac.com/]wbcmszpmjlac[/url], [link=http://rjlsvtgumcqf.com/]rjlsvtgumcqf[/link], http://wmeqczhdjhbd.com/

Leave a Reply