Two Methods to Make Those Cute Little Icons
You See in Browser Tabs, aka Favicons
Ok, so what is a favicon?
Have you ever noticed the cute teeny-tiny graphic on the tabs of the websites you are looking at? Have you wondered why it’s there? Have you ever wondered how it got there? And have you noticed that when you have several tabs open at the same time in IE, Firefox, Chrome, Safari and more, you can readily tell which site is the one you were just looking at because of that cute little icon? Well that’s exactly why it’s done! A lot of sites have them, but I still see a lot that don’t have a favicon. It’s a branding procedure and it’s there so that you can identify it at a glance.
A favicon is described in Wikipedia this way…
“A favicon (short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon.”
Well put Wikipedia!
I know, I hear you…you want to create a favicon on your own website or for your clients’ sites but haven’t quite yet got around to figuring out that little, but ever-so-important detail. Well, it’s very simple and I’m going to show you how.
Method 1 – Favicons With Photoshop:
Requirements for this method are:
- Photoshop (I’m using CS5.5 in this tutorial)
- logo or image
- ftp program like Filezilla
- a free plug-in for Photoshop you can download at Telegraphics.
- 45 minutes (give or take) of your time
Steps to create favicon with Photoshop:
- The first step is to find a clear image or create your own. It should be at least 64×64 pixels and it should represent what you want people to see a to make that connection to your site. If you have a logo or branding, use that definitely if it can be reduced down, even if only part of it. I chose a nice clean time appropriate Valentine heart time that I purchased from my favorite royalty-free stock image site, 123rf Stock Photos. (IMPORTANT NOTE: Remember to always purchase your images and read the copyright usages, so there is never any chance of copyright infringement! Believe me. I know someone that used an image she found in Google for an online newsletter and got caught to the tune of a $1200 fine about 3 months after her newsletter went out and from what I hear, she got a bargain!)
- The next step is to reduce the image size in Photoshop. You will want to crop it down to eliminate all empty space to get the best image. Now there is one more thing that works well when reducing the size of images. That’s the Resample option of Bicubic Sharper (best for reduction) option in the image size dialog box as shown in this image:
This is 64x64px image reduced from its original size of 388x388px.
And this cute little guy is the final 16×16 px suitable for .ico.
- Once reduced to 16x16px, you can save as an .ico file, if you have this free plugin for Photoshop that you can download at Telegraphics. It reads and writes .ico files. You simply go to File | Save As “favicon.ico”:
- Using your FTP Client, I use Filezilla, upload the file to your root folder like this:
- Now add this line of code to the head of your html file (anywhere between the <head> tags): <link rel=”Shortcut Icon” href=”favicon.ico”>
- Then preview in browsers and see that now, you too, have a cute little icon next to your url! See how at a glance, among all the others on the tabs I have open, I know exactly which site is mine because of the cute red heart! And at a glance I know all the other sites I have open also. If it wasn’t for favicons, they would all have the browsers’ logo like the one on the end and you would have to scroll through each open site to know what is what.
It’s tested and works in Internet Explorer, Firefox, Safari, Google Chrome (showing above) and Opera.
Method 2 – Without Photoshop
I don’t have Photoshop…can I still have a favicon?
- an image ready to use – typical supported file formats: gif, jpg, png, and bmp.I recommend you use a gif or png with transparency with a maximum file size of around 150kb.
- ftp program like Filezilla
- 15 minutes of your time
Of course you can. And it’s an even simpler way! Let’s do it…
- Open a favicon generator like this one or search for others:
- Be sure to add the code <link rel=”Shortcut Icon” href=”favicon.ico”> between your head tags and upload the favicon to your root directory.
That’s it! Thanks for reading and I’ll be looking for your cute little icon otherwise known as a favicon on your site!
How do you create your favicons? Please leave a comment below and let us know how this helped you or what you use to create your favicon.
What else would you like to learn or what graphic challenges are you having? Let us know by leaving a comment below!
And be sure to sign up for our blog posts to be delivered to your inbox so you’ll always know when we post!
Judy Rose – Graphic and PhotoShop Expert, Dreamweaver, SwishMax4, Flash, jquery, HTML and CSS extraordinaire since 2002! If you need help or assist please email us at firstname.lastname@example.org or visit Judy’s site at http://josedesigns.com/