CSS, JavaScript and XHTML Explained

Favicons: why and how to create favicons September 3, 2007

The "WHY" of Favicons

Favicons ARE an integral part of your website and branding.

Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.

Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.

They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.

They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.

Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?

The "HOW" of Favicons: How to design & create a FavIcon:

Designing a Favicon:

• If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
• If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
• Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
• If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.

Creating a FavIcon: Converting an image to a .ico

• Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
• If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your .jpg, .png or .gif into a .ico file. The file created will be called favicon.ico. You will be directed to download it.
• Upload the .ico file to the root directory of your website.
• If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the .ico file in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
   
  
  <link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />

Uses of Favicons

Now your favicon can appear all across the web:

• Branding in the browser address bar.
• Branding in the bookmarks/favorites menu.
• Branding on browser tabs
• Bookmarked links on other sites
• Branding in your email signature
• As a bullet or icon in someone else’s link to your site
• Let me know of other ideas in the comments section….

Controlling cursors with CSS and creating .cur files April 21, 2007

Creatings Cursors, a.k.a. .cur files

You can convert images such as .jpgs or .gifs into cursors. A static cursor is saved as a .cur file. An animated cursor is saved as a .ani file.

To create a .cur or .ani file, you need specialized imagery software that is freely available. Available software includes the free Just Cursors that is a bitmap style editor and Icon Forge which costs money, but has much greater capabilities.

Here are the steps:

• Download and install the imagery software of your choice, listed above.
• Convert your image to a .cur file if you want a static cursor. For animated cursors, convert your animated .gif file into a .ani file.
• Upload your image to your server.
• Write a CSS class to target the cursor (see below for instructions)

Including cursors with CSS

To include image cursors, you need to have the .cur file loaded onto a server on the Internet so that you can point to it:

<style type="text/css">
li { cursor:url(http://www.yourdomain.com/images/yourimage.cur); }
</style>

If you want to simply control the browser default cursor with CSS you don’t use the image path, but rather, the cursor name:

li { cursor: text; }
a {cursor: pointer;}

Controlling cursors with JavaScript

You can dynamically change your cursor using javascript:

object.style.cursor="text"

List of Browser Cursors

Hover over any of the definitions below to see how the cursor renders in your browser:

Value		Appearance and default browser defined usage
url(image.cur)		Image cursor you defined (if browser supports it)
default		The default cursor: default value for disabled form elements and media="print" styles.
auto		The browser’s default cursor: input[type="hidden"]
crosshair		Like a big plus sign
pointer		hand pointer: input[type="image"]
move		cross with four arrows: Image Resizing
e-resize		left-right arrows: Image Resizing
ne-resize		arrows pointing northeast & southwest: Image Resizing
nw-resize		arrows pointing northwest: Image Resizing
n-resize		arrows pointing up & down (points northeast in IE): Image Resizing
se-resize		arrows pointing northwest & southeast (points northeast in IE): Image Resizing
sw-resize		arrows pointing northeast & southwest:Image Resizing
s-resize		arrows pointing up & down (points northeast in IE): Image Resizing
w-resize		left-right arrows: Image Resizing
text		Line up and down, indicating text: input, textarea, a:visited, a:hover
wait		Watch or hourglass
help		Question mark or balloon: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.

Note:

• I recommend against using image cursors, especially animated .gif cursors, since they are annoying.
• You can even convert a Flash movie into a cursor: first export the movie as an animated gif, then export your .gif to an .ani file.
• If you are declaring an image cursor, remember to always define a generic cursor at the end of the list in case none of the url-defined cursors can be used. A list of cursors should be specified, followed by a standard cursor designation. Then, if the user’s browser cannot handle the image cursor, it will use the the other specified cursor. If that doesn’t work, it will use the default cursor defined by the browser.
  {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
• Safari, IE and Firefox support cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape and the alternate cursor does not load, so you’ll get the default.
• .cur is for a regular cursor, .ani is for an animated cursor.
• To see the cursors on your desktop on windows navigate to C:\WINDOWS\Cursors