How to Make a Favicon
A favicon (sometimes called a shortcut icon or a website icon) is the small icon that appears by the side of the address bar in…
A favicon (sometimes called a shortcut icon or a website icon) is the small icon that appears by the side of the address bar in your browser and in some cases next to the name of the site in the tab bar (as displayed above). The benefit of a favicon is purely aesthetic, serving no other purpose than looking good and helping to reinforce your brand.
Some favicons we like
The best way to inspire is to show you some sites which have favicons that stand out from the rest of the crowd online:
- Google: An obvious choice. They’ve got their famous “g” and all of their brands colours in the favicon.
- Smashing Magazine: The use of strong colours and negative space works really well.
- SEOmoz: An example of a favicon which has no letters, but is instantly recognisable as the SEOmoz brand.
How to make a favicon
Now that I’ve explained what a favicon is, why they’re good and given you a few examples it’s time to create your own. To do this, you’ll need an idea of what’s going to appear in the favicon, what you’ve chosen, ideally in a vector format, and some image manipulation software such as Photoshop or Gimp.
Step 1: Create your image
The first step is to create the icon in a PNG/JPG format. Open the file you’ve chosen in photoshop and make the canvas square by going to Image > Canvas Size, then changing the height of the image to match the width.
Step 2: Re-size your image
A favicon needs to be a 16×16 .ico file, so you’re going to need to resize the image – this is the reason it’s always best to do this in vector format. To do this, all you have to do is go to Image > Image Size and resize the image to 16 pixels by 16 pixels. Now, adjust the icon to your liking to ensure that it will be visible in the browser and will stand out. The example below is very simple and subtle, but works really well when it’s a transparent PNG.
Step 3: Convert to .ico format
Now that the favicon is re-sized, save it as a “favicon.png” and head to Favicon Generator, browse for your file, convert to 16×16 and press “generate favicon”. When that’s done, press “Download Your Favicon” and you’re nearly done!
Step 4: Add favicon to your website
The quickest way to make a favicon appear is to drop the favicon in the root directory of your website, usually called “www” or “public_html”. However, this is not always fool proof, so it’s best to add a line of code to the <head> section of your website too.
<link rel="shortcut icon" type="image/x-icon" href="path/to/favicon.ico" />
Step 5: Finished!
There aren’t any more steps, so you can sit back and relax, knowing that your website looks that much more complete. If you need any help, do not hesitate to send us a tweet or add a comment below.