Over 1 billion websites exist on the Internet.
How are you going to make sure the people visiting your website will remember it? They say a picture is worth a thousand words. If you design a favicon that people remember, that “picture” can be worth more than mere words.
Design Counts
You are working with an extremely small space for your favicon. Since most people will be browsing your site through Chrome, Safari, and IE, you’ve only got a 16×16 pixel space to work with. Talk about claustrophobia!
Every move you make is going to count in this small space, so make sure to only keep what you need. Let your creativity flow, but only so much as you’re willing to spend time with editing software to sharpen and perfect your icon.
Get Familiar with .ICO
While it’s not the easiest file format to work with (it likes to think it’s better than everyone else with its plugins and such), the .ico file format is your ticket to paradise. The file format is supported on all browsers and can perform more functions than using a GIF or a PNG file.
Choose Your Software
Favicons don’t just magically appear — unless you’re a genie. If you’re not a genie, and you probably aren’t, then you want to take a look at the following types of graphics software to help you with creating your masterpiece:
Favicon Generator – Free Photoshop + HTML Template:This free Photoshop + HTML template is gonna help you to generate and test automatically your favicons in every needed resolution.It’s been created by Chrometaphore ( Lorenzo)
X-Icon Editor: One of the more basic choices in the field of favicon-making. Easy-to-use and you can create your icon in just seconds.
Junior Icon Editor: You may think you have opened up Microsoft Paint when you run this software. With the ability to use everything from a pencil to spray can, this free software is loaded with tools for you to utilize. You can also import file types such as PNG and ICPR.
Free Icon Maker: With slightly more functionality than the X-Icon Editor, Free Icon Maker lets you either create your own favicons or use ones already in the program.
ICOFX: Looking for some members only benefits? This software is available for download or purchase. Why all the bells and whistles? ICOFX comes with the ability to create movements in the icon, as well as a plethora of editing tools.
Photoshop: Obvious, right? Photoshop does everything — including creating favicons!
After you’ve chosen the software that’s right for you, you’ll want to begin focusing on actually creating the icon.
Blow Your Images Up
When you launch your graphics editing software, you’ll want to blow up your image to something around 64×64 pixels. This helps you to see what you’re actually doing, and takes away the need to tilt your head and squint like you’re trying to read Shakespeare.
While creating your work of art, remember to keep it simple. People can’t remember odd images that are contorted. Instead, choose a shape, word or number that best represents your website/brand. Letters seem to be doing pretty well these days. For example, a lowercase “f” for Facebook, a cursive “D” for Disney.
If letters aren’t your thing, don’t be afraid to draw a small picture. The Chrome icon, which looks suspiciously like an item from the Pokémon games, is a great example of an icon that keeps it simple (a circle) that is manipulated into Google’s own style (their unique color scheme).
Entire logos normally don’t translate well into a favicon. If you want to transfer your logo, think about selecting a portion of the logo to use.
For instance, if your logo is a person, you may want to use only the person’s head. If it’s a character wearing a uniform, you may want to strictly have the uniform as your favicon. It’s tempting, but don’t be THAT designer and make your icon your head or face. Nobody likes those people.
Save Your Favicon
Your beautiful creation is complete. Now, it’s time to save your favicon.
If you weren’t working with an .ICO file to begin with, you’ll want to save all of your images — for example, PNG images — into one .ICO file. Once you’re saved, you’re almost there.
Upload Your Favicon to Your Website
You’re confident enough that you actually want to see your creation in action, right?
If you have one favicon for your site, save your file (example: favicon.ico) and drop it into the root of your website. This makes life easier on your computer when it tries to find your favicon. It also helps your computer stay clean and run well, just like your awesome favicon. You can also develop different favicons for individual pages by using a short snippet of code.
That’s it! You now have an amazing favicon. Your creation is on display for the thousands and thousands of people that will cruise through your site. You’re armed with the technical knowledge and expertise to go out and create some mind-blowing favicons. Get to it!
