How To Create A Favicon

Posted on

The favicon is one of the first thing that your visitors sees. So make sure it’s a well designed favicon that you like. It might not seem like a big deal, a favicon doesn’t have an effect on the visitors, however, I think a good designed favicon shows professionalism and makes the site more creditable. I guess that could have something to do with my passion forĀ  designing, anyhow, here are some tips that will help you make and design a favicon.

This is how you can create a favicon. Make a new document, that’s at least 128px x 128px. Make a simple design, you can get some inspiration from other favicons, there’s usually only two solid colors, a dark and a bright. Use the initial letter of your website, this is usually the normal type of favicon design, so try to make it unique. Take the text tool and write it out, pick a font you like. After that, you can add some darker/brighter shades around the edges and corners.

When you are done creating the favicon, minimize it to 16×16 px, pretty much every image editing software has that feature, even paint has it.

If you like it, go to Save and Publish below. If you don’t, I suggest looking through some of the “favicon” Image results on Google, for some inspiring ideas and try again.

There are some great favicon creators available to help you.

Save and Publish

If you have Photoshop, you can download and install this plugin:
ICOFormat and here’s How to Install
If you don’t have Photoshop, you can generate an .ico file using this tool:
Dynamic Drive- FavIcon Generator
Add the FavIcon.ico to the right directory on your server, the links below will you give an idea of where it should go.

Display the FavIcon

Add either of thse codes to your index.php before </head>. Make sure it’s the right location as well.

<link rel="shortcut icon" href="" type="image/"/>
<link rel="icon" href="" type="image/x-ico"/>

Let me know how your favicon design turn out in the comments below!

Founder of