demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Create A Simple Favicon

html / favicons

Estimated reading time: 1 minute, 39 seconds

The established method of creating a favicon is to convert a 16 × 16 image into .ico format. The easiest but least compatible method is to save the same image in one of several possible formats. The latter method works in modern browsers, but older ones, such as IE6, will have problems with using an image as a favicon in this way.

In either case, using the code shown below will cause the browser to use the image as a favicon.

PhotoShop has no option to save a file in .ico format. To convert the file, you must use a separate tool. (My personal, sentimental favorite is chami.com.)

Once your .ico file is generated, upload it to the root of your web site. All pages that wish to display the favicon must link to it. Obviously, we can’t use an <a> tag — we don’t want the users to “go to” the icon, just use it in our page.

There are a number of tags that are used to “pull” content from sources external to a web page into the page itself. The img tag obviously does so for images. You may have encountered the object tag, which fulfills a similar role for other external media files such as Flash clips, QuickTime movies and audio. Another is the link tag, which is used for (among other things) external style sheets. We’ll use it in that context in the section — for now, we’re going to use link to bring the favicon file into our page.

The link tag must be written inside the head section of the document, and closed inside itself. In the case of a .ico file, the code will look something like this:

<link rel="shortcut icon" href="favicon.ico" />

If you choose to use a PNG file instead:

<link rel="shortcut icon" href="favicon.png" />

That’s it! Note that most modern browsers will detect the favicon.ico file without an explicit link, so long as the file is in the correct location.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.