DeV Depot: Faviconer, Update Your Site’s Favicon
For many web designers, the migration towards higher resolution displays brings with it a range of challenges and opportunities, some of which are small and pesky while some others form the well crafted details that separate one site from another; such as the site’s favorite icon, or “favicon” — the small, customizable graphic that is displayed near a browser’s address bar, or by the site title on a browser window tab and bookmark list bar — a nicety and perfect branding opportunity that draws user attention to your site or app.
According to its publisher, Faviconer (www.faviconer.com) lets users create free high resolution favicons, with both 16x16 pixel standard resolution, along with high resolution 32x32 pixel Retina ready favicon images, packed into one .ICO file for a multi-resolution approach that is suitable for use on both today’s and tomorrow’s screens.
While some site operators dismiss the importance of having a high quality favicon, these tiny graphics make a website more unique, so that it stands out among other sites that do not have time, skill or knowledge to produce the icon, which forms an important part of a site’s brand. Since top tier sites all use them, a favicon is one more way that any site can look more professional.
Faviconer stands out from other favicon generators as it allows not only other images to be uploaded for conversion to the .ico file format, but includes a drawing function for a fully custom design, with a color picker and basic tools to get the exact look you want.
“Using this online software you can convert any JPG, JPEG, GIF or PNG image and then download a favicon icon file with transparent background support,” explains the publisher. “If you don’t have the right picture to convert you can draw your icon from scratch, pixel by pixel… You’re only limited by your imagination.”
A gallery of previous Faviconer designs illustrates the possibilities of this handy tool.
Faviconer also offers tutorials on how to create a good icon and what web designers should keep in mind while using online .ico makers, including notes on the importance of using special icon-specific .ico files instead of the more commonly available GIF or PNG graphic file formats for the task of deploying favicons.
For example, Faviconer suggest users avoid PNG or GIF if they want reliable browser compatibility, since only ICO files will be correctly displayed in all browsers. ICO files also offer a transparent alpha channel allowing clear backgrounds, similar to that of GIF and PNG images, but smaller in file size than the same image rendered as a GIF or PNG.
Like other graphic formats, ICO supports multiple resolutions in one file — such as the 16x16 and 32x32 pixel graphics used by Faviconer, which offers the added benefit of better image quality when a website visitor creates a desktop shortcut to your site or app.
Another benefit of using a favicon.ico file is that it helps keep your error logs clean, because when browsers ask for this file, even when it is not specified in the HTML code, the server records a “404 Not Found” error in its logs — and any problem with a website is one problem too many — with this issue having a simple solution: add a favicon.ico.
The details count, so when you’re ready to put that finishing touch on your website with a high resolution favicon, Faviconer is ready to help.