Exercise: Favicon

Favicon

Ever wonder what those tiny little pictures are that appear in the URL bar of browsers and sometimes in bookmark lists? They're called favicons, and they're easy to make—you just need the right tools.

Exercise

Create a favicon and reference it from an html page (or pages).

Download the .ico (Windows icon) plug-in for Photoshop. Favicons make use of a specific Windows-based image file format not normally available on a Mac. But a few aps and plug-ins have been developed that allow Mac users to save images in this format. You can download one such plug-in here. Once you download it, you need to install it in the proper folder: Hard Drive > Libraries > Application Support > Adobe > Plug-Ins > CS3 (or CS2 if applicable).

Design your graphic. Because favicons are so small, big, simple, clear shapes are a must. Favicons are only 16 pixels wide, so you don't have a lot of room to get fancy (look at some examples: my site, Google, CBS, NBC, City of Minneapolis, etc). Create a simple graphic in Photoshop or Illustrator (if you make it in Illustrator, you'll have to open it in Photoshop for the next step).

In Photoshop, reduce the size of your design to 16 x 16 pixels.

Select Save As. For the format, choose ICO (Windows Icon). Finally, save your file with the name favicon.ico (note: favicons MUST be called favicon.ico; nothing else will work). Now you’re ready for installation.

Put your favicon in your root folder on the main (top) level.

Launch Dreamweaver and open your index.html page.

When browsers are looking for favicon files, they first search the same web directory as the HTML file currently being displayed. If the browser doesn’t find a favicon file in the same directory, then it searches the root (top level) directory for the domain. So, if we assume you will be using only one favicon for your whole site, then all you should need to do is upload your favicon.ico file to the root directory on your web server. However, some browsers that are capable of displaying favicons won’t actually do so unless instructed by the web page. To satisfy these browsers, your web pages need to include one of the following lines of code somewhere in the head:

That's it. Save the html file and preview in Firefox. Safari and Explorer won't display the favicon if it's on the local computer; you'll have to FTP it to the server first. And even then you may have to "bookmark" it for Explorer to work.

FTP the favicon and updated index to your server space.

Point Breakdown

4 pts	Portfolio quality/professional looking favicon.
3 pts	Great looking, original favicon.
2 pts	It's a favicon, and it works.
1 pts	Missing one or more required elements or contains one or more errors.
0 pts	Poor showing; mostly incomplete or full of errors.

VCA225 Digital Production

Favicon

Exercise

Point Breakdown