- Small Business Trends - https://smallbiztrends.com -

Creating a Custom Favicon

I’m going to admit something kind of geeky. I really like favicons. They’re fun. They’re a great branding tool. And they’re something simple that small business owners can do to spice up their sites and even increase usability for users.

If you don’t know what a favicon is, let me offer some assistance:


Favicons are the mini, 16×16 pixel graphics that represent your Web site up in the address bar, in a user’s list of bookmarks or in their browser tabs. They allow your visitors to create a visual connection with your site.

Neat! How do you create one?

Design your favicon:

Save your favicon: When saving your file, reduce it to 16 bit and save as “favicon.ico” if you’re using Photoshop or “favicon.gif” or “favicon.png” if you’re using something else. If you are using Photoshop and want to give your favicon some extra oomph, it’s recommended you download the Windows Icon file format plugin [4] so you can save in the ICO format.

Upload your favicon: Connect to your server and upload your favicon to the root folder of your site. Then, add the following HTML code to the head section of your Web page (between the two Head tags) (pick your file type):

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”v>
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>
<link rel=”icon” href=”/favicon.png” type=”image/png”>
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

Refresh: Once you’re done, refresh your browser and you should see your favicon appear. If not, give it a few minutes. Sometimes it takes a little bit for everything to sync.

And that’s it! Four steps and you have a great branded favicon that will help users recognize your site in the list of bookmarks or in their browser. Pretty simple, right?

Just for fun, here are some of my favorite favicons on the Web:

Any other personal favorites?