Creating Favicons
| by trigatch4 on September 23rd, 2007 |
Doing a lot of small things can make a big difference. And, one of those small things is a 16 by 16 box of pixels called a Favicon. You’ll notice the brand new Eureka Diary Favicon in the address bar and on your browsing tab. It looks like this:
What is the purpose in a Favicon? It extends your brand. It builds your website’s personality. It adds another memorable point of contact with your visitor. And sure, it’s only a tiny picture, but like I said: doing a lot of small things creates the synergistic effect that builds empires. When a piece of clothing is emblazoned with the Nike Swoosh it gains instant credibility and value. When someone sees a yellow M they immediately think of McDonald’s “Golden Arches”. This is the pinnacle of branding and while our website probably won’t reach THAT level of noticability… it can still increase the perceived value and top of mind awareness for your visitors. It adds to the depth of your brand’s identity… so do you want to make a website or build a brand?
The Eureka Diary favicon is a light bulb. That’s the entrepreneurial feeling I get all too much… the “Aha” moment when the lightbulb goes off in my head. And, when I get around to giving this blog a new theme (soon hopefully) I will be integrating a lightbulb into the design.
So, let’s get started and give YOUR website a sweet looking Favicon!
First off, you need to download this photoshop plugin and place the file in your plug-ins/fileformats folder within photoshop. Go ahead and restart photoshop if you already have it running, so it will load our new file type.
As mentioned before, Favicons are 16 pixels by 16 pixels but that may be a little small for our liking when we’re designing it.
FILE > NEW… Name your file “favicon” and make it 64 pixels by 64 pixels:
Now it’s time to make your Favicon and the best way to go is SIMPLE if you ask me. It’s going to be incredibly small so details and gradients are pretty much pointless. If you have an existing logo, try to embody that idea/concept with one simple item. Google and Yahoo simply use the first letter of their name, stylized with their “personality”. Basically, you need to boil down your website’s subject into one image.
Once you’ve made your image, you’ll want to save the .PSD before doing anything else. Once you convert it to a 16×16 it could be an unrecognizable blob or you might want to make some minor changes – give yourself that luxury.
Now that you have it backed up, convert it to the necessary 16×16 dimension by going to IMAGE > IMAGE size and changing simply plopping the new dimensions in. At the very bottom, make sure you have RESAMPLE IMAGE selected and the setting is BICUBIC SHARPER – this will give you the most clarity and best results:
Do you like what you see? If not, reopen the PSD you saved and play around with it meets your requirements. Once you’re ready to move on click FILE > SAVE AS and select the brand new .ICO file type we imported in the first step of this tutorial. Here is what it looks like:
Use an FTP client to put the favicon.ico file you just created into the root directory of your website. Now we need to alert the browser that it exists.
In the header of your website, in between the <head> </head> tags, place the code that is between the hashes, replacing URL with the address of your site:
————————————————————
<LINK REL=”SHORTCUT ICON” href=”URL/FAVICON.ICO”>
————————————————————
Bingo, Bango. Grab a beer from the fridge, refresh your website in the browser and smile at the sexy new favicon you’ve created. Sure, it’s only a small change… but doing a lot of little things goes a long way!
No Comments
No comments yet.
Sorry, the comment form is closed at this time.