All About Favicons & Such

Finally finishing a trio of tutorials I started months ago and just uploaded this PDF:

Give Your Site Some Yummy Favicon Goodness

Soon, I’ll write a post about the pros and cons of how various browsers handle Favorites/Bookmarks. For now, I’ll just highlight each browser’s Favorites/Bookmarks bar — a focus of discussion in the Favicon tutorial. It’s a tiny matter, really, but I believe little things count when it comes to User Experience, User Interface, etc.

I may say something akin to, “Browser X doesn’t have this feature” and some of you might quickly think, “Yes it does” but the point of my statement is twofold:

  • I shouldn’t have to look for it
  • If I look for a setting, it should be easy to find

Those are the two commandments of UX/UI as far as I am concerned. If I can’t find or use a feature/setting, it may as well not exist.

examples.png

Figure 1: Favorites Bar in Internet Explorer for Windows

A major advantage of Favicons is potential for optimized real estate on the Bar. By default, the bar includes both the site icon (favicon) and site name. Each browser has its own method for changing this.

Internet Explorer

Right-click a favorite in the Favorites Bar and choose Customize title widths > Icons only. Nice & clear, I must say.

Downside, IMHO, is it changes it for all of them. Ideally, we could change individual Favorites for a couple reasons:

  • Easily recognizable and rememberable (next year’s Word of the Year, I guarantee it) don’t need to show the site name while ugly, vague, generic favicons do.
  • Sites without favicons sharing the same generic icon provided by IE (or any given browser) need to show the name.
  • Multiple Favorites from the same site (a dozen favorites from Adobe.com, for example) need some descriptive text.

Pros

  • Tooltip shows favorite Name (which you can edit via right-click > Properties > General), page Title (which you can’t), and URL so you have even more freedom to use Icons only.
  • Icons only applies just to the bar, not to items in the menu (Figure 1)
  • IE rawks alone among all browsers by allowing you to change the icon (right-click > Properties > Web Document)! Yet another reason for Icons only. Win for IE.

Con

  • Icons only also applies to folders so how many I create is limited by my capacity to remember their names and which folder is which. The tooltip shows it, but that’s a huge inconvenience because, you know, I’m a white, male, American.

 FireFox

FireFoxMac.png

Figure 2: Firefox for Mac

Right-click a bookmark in the Bookmarks Bar, choose Properties, and delete contents of the Name field.

Pro: Above method is for each, individual favorite so I can have some with the name (Weather.com in Figure 2) and some without (Apple.com in Figure 2).

Opera

OperaMac.png

Figure 3: Opera for Mac

Rt-click > Edit and delete Name.

Pro: Super-convenient Add to bookmarks bar button. Win for Opera.

Chrome

ChromeMac.png

Figure 4: Chrome for Mac

Rt-click > Edit and delete Name.

Con: Also removes Name from menu. Lose for Chrome.

SeaMonkey

SeaMonkey.png

Figure 5: SeaMonkey for Mac

Rt-click > Properties and delete name.

Cons

  • Also deletes name in tooltip. If I have the name showing, I don’t need the tooltip but if I don’t have the name showing, I need the tooltip. Lose for SeaMonkey.
  • Ugliest generic icon.

Vivaldi

Convoluted mess I won’t dignify with a description. Lose for Vivaldi.

Tor

TorMac.jpg

Figure 6: Tor for Mac

Doesn’t seem to grab favicons or even have a generic icon so everything else is moot. Lose for Tor.

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in Tutorials, UI, UX, Web Design and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s