Favicons are one of those little branding things that really are a “small touch” but make the whole site look a little more polished and professional. And let’s face it, when you attach one to your site it just feels cool. I still grin every time I add one!
If you’re aren’t quite sure what a favicon is, it’s the tiny little icon that shows up int address bar next to the website URL you are visiting and in the tab next to the website name. It also get’s added to your bookmark bar if you book mark a site (in most browsers).
They look like this (the little red “CC:”) (this is the one we use on citycrush.com:
Fortunately adding a favicon is about as easy as it gets, you just have to know the few basic steps.
1) Create a square icon, you want a square image even if you logo isn’t square (you can put it on a white or transparent background). Just make sure the width:height aspect ratio of the overall image is 1:1. Start with a size that is big enough but you don’t have to start huge. (50 x 50 or 100 x 100 is great, if you have something bigger that is fine too). Create it as a gif, jpg, png, or bmp image.
2) Don’t get carried away with detail because much of the detail will get lost when you shrink it down to icon size. Clean and simple is best, it might be a simplified version of your logo (our is).
3) Go to the Dynamic Drive Favicon Generator (free online tool ).
4) Select Your Icon, click “Create Icon” and it will automatically create a favicon.ico file for you to download. (.ico is an icon specific file format). Dont’ change the name, favicon.ico is “the standard.”
You’ll now need to upload the favicon.ico file to your website. If you currently have one (perhaps a default that was provided with your site, theme, …) then just overwrite the existing favicon.ico.
If you don’t have one you’ll need to upload it and add some code to your website. If you are on WordPress or another template driven website you’ll want to add this to your header.php file inbetween the <head> and </head> tag. If you are on a static site (ew!) then you’ll need to add this between the same header tags on every page of your site.
<link rel="shortcut icon" href=" http://www.yoursite.com/path/favicon.ico" type="image/x-icon" />
Notes: “path” is whatever the path to your favicon.ico file is. It might be something really long or if your favicon resides in the root directory of your website you’ll just have http://www.yoursite.com/favicon.ico in as the path.
In WordPress you can also use:
<link rel="shortcut icon" href="<?php echo bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
assuming your favicon is in your themes image directory.
About Scott Ellis
I have always had a fascination with those little icons that suddenly appear… didn't know what they were called or even how they got there. And now I know how to produce one! How amazing is that?
Thank you for sharing and I plan to create one today!
Gloria, glad you found it useful. Favicons are amazing website candy!