You are in your browser of choice and you tap the appropriate
keys on your keyboard to get to your desired website - your browser will
show the URL address in the address bar, but more often than not, you will also
see a tiny little custom graphic next to it – this is a FAVICON – (pronounced
"fave-icon"). Favicons also
show up on the tabs of browsers and on your bookmarked sites. I’m guessing you have probably noticed them
but never really paid close attention and never really knew what they were or
what they were called. Surprise! Not only do they have a name, they have a
purpose as well.
Favicon’s are tiny – 16 pixels by 16 pixels - but they pack
quite a pixel punch. Although a Favicon
is not critical, most professional websites include them in their design. Attention to detail is truly key in defining
a thoughtful, professional website and the tiny little Favicon is a subtle but
delightful detail. It helps to create a visual representation of
your website to visitors and therefore increase brand awareness. Want more?
Most bookmark folders are so crammed with bookmarks that people don’t
even read the words, they look for the Favicon.
If you have a custom Favicon it exponentially increases the chances that
people will more easily find your bookmark and visit your website.
Although there are many, here’s one more
reason/purpose of this tiny little powerhouse – people oftentimes have multiple
websites open resulting in multiple tabs standing tall practically shouting for
your attention to click on them – why not give them a unique reason to click on
your site!
Wanna know the best part? This nifty little detail only takes about 5
minutes to create.
Get ready, get set….Let’s create a Favicon!
The Favicon has its own file extension designated as “.ico”. Although Photoshop is an impressive, flexible
graphics editing program for creating custom favicons, in order to save files
under the .ico file extension in Photoshop, you have to download a separate
plug-in. luckily, this is really easy to do. Click here to download the plug-in
from Telegraphics - http://www.telegraphics.com.au/sw/
- chose the one labeled ICO (Windows Icon) Format, which is available for both
Mac and Windows. It’s a free download but they do ask for a small
donation. Go ahead and download the
plug-in now so that you have it handy as you progress through the design
process (be sure Photoshop is not open before you download).
By opening Photoshop after the download you can check and
see if the file extension appears by doing a “save as” and looking at the list
of extensions to see if it appears. If
you see it listed you are good to go. If
not, no worries just go through the process again.
If you are starting your design from scratch, it is best to
start with a larger canvas, say 64 X 64 pixels.
If you want to use an existing logo go to Image > Image Size in the
menu at the top, and change the size to 16×16. Make sure that’s pixels, and not inches. In the drop-down menu where it says Resample be
sure to select the Bicubic Sharper option. This ensures the image doesn’t blur
too much when it’s resized. This applies
to both a new design and an existing logo when resizing.
Be sure to keep your designs basic, say, a background color
and a letter for instance and always test it before you commit to it.
Now it’s time to save your file. Decide on a name and go up to File > Save
As, open up the drop-down menu and select the .ico option - you should be
prompted about the icon format. Be sure
to select the .ico format and don’t be confused that Photoshop still shows it
as a .psd file. You’ll need both because
the .ico file is not editable whereas if you wish to make changes you can edit
in the Photoshop version and resave as an .ico file.
Cool, you have this spiffy little Favicon all saved and
ready to go, what now? How do you
actually make it work in your website?
First thing you do is save your ICO file to the root directory of your
website. Do not place it in your images
or sources file as your browser will not be able to find it.
Next, go to your home page and insert the following code between
the <head> tag in the HTML document as follows:
<head>
<link rel="icon" href="FaviconNameHere.ico">
</head>
That’s it, you’re done!
Congrats, you’ve created a unique favicon for your website! That wasn’t so bad was it?!
If you want mobile devices to utilize the same image, you’ll
need to do a bit more work. You’ll need
to create several different sizes of the image but this time you will save as a
PNG file. These are called “Touch Icons”. Again
save the different size files to your root directory. Next you’ll need to add the following code to
your HTML document:
<head>
<link rel="apple-touch-icon"
href="apple-touch-icon.png">
</head>
Truth be told, there is a bit more to it as you’ll need to
address the different size images you have created. You can find out more about adding these
images to your code by visiting:
and
No matter what level web designer you are, the level of
impact Favicons and Touch Icons have is tremendous so be sure to include them
in your design. Have fun designing!!
Your instructions were very detailed and straight forward. If was very fun reading your blog!
ReplyDelete