I just got around to setting up my new favicon for my website, yay! Not sure what a favicon is? Notice how certain websites (like Facebook, Yahoo..) have little graphic icons representing them in your browser’s address bar? Those are favicons! I love those little guys. If you haven’t already, I’ll quickly show you how you can set yours up!
First, if you’re using Photoshop, you have to install a plugin that allows you to save files as .ico. Download this file, then extract it to Photoshop’s “file format” folder. The location is typically: C:\Program Files\Adobe\Adobe Photoshop\Plug-Ins\File Format
Create a new document in Photoshop, using the settings below.
Favicons should always be saved at 16×16 pixels. This is a very tiny canvas to work with, so if you don’t mind working with pixels, this should be fine. Alternatively, you can create your file at 64×64 pixels and save it down to 16×16 when its finished.
Zoom in nice and close (at pixel level) so you can begin creating your favicon. Zoom back to 100% during your progress to see how the icon is looking! Design your favicon to reflect the look and feel of your website - using elements of your website design to create a clean, slick icon. I chose the first letter of my name, and added subtle gradients, glows and shadows to make the icon “pop”.
So here’s my final design. I’ve added each effect (shadow, glow) on its own layer, and I’ll save this file as a PSD first in case I need to make changes in the future.
Finally, save your file as favicon.ico. If you chose to design at 64×64, choose Image>Image Size and enter 16 x 16 pixels. Click Resample Image and from the drop-down menu choose “Bicubic Sharper” (PhotoshopCS). This will help keep your icon sharp once you downsize.
Upload the icon in the main directory of your website. To help some browsers locate your icon, place this code just after the head tag on the pages you want your icon to appear: <link rel=”shortcut icon” href=”/favicon.ico” />
Don’t panic if the favicon doesn’t show up right away when you reload your website! Try clearing your browser cache, or restart your browser. And make sure you uploaded the icon to the main directory! That should do the trick.
Need some favicon inspiration? Try here.
If you don’t use Photoshop or other graphic software, there are always tools that create favicons for you. Here’s a favicon generator.
