Custom Favicon: A Simple Branding Tip

Steven4 responsesGeneral

Today I want to share a little tip with you that can have a very interesting effect to make you stand out of the crowd of websites out there. This very simple tweak is generally overlooked by webmasters, but in my opinion it’s a huge mistake because a few minutes of work on this can have a very good impact on your branding.

favicon

Learn how I made $33,543 online in the past 12 months.

Simply input your best email below to get started.

Let’s take a look at the definition of a Favicon from Wikipedia:

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of their own from the hard drive and associate it with a website.

Now that you know what is a favicon, let’s discuss it’s real use. By taking a quick look at your adress bar right now, you can see that Dukeo has a favicon, and this favicon represents Dukeo’s logo. Just by taking a look at the different tabs in your web-browser, you can spot which one is from Dukeo, making it easier to visit it again.

The favicon is also very useful regarding bookmarks. For example, if you bookmark Dukeo’s Homepage, the favicon will be displayed in your bookmark list, making my website stand out from the crowd of favicon-less websites and blogs.

Creating a favicon is really easy. First, create a 16 pixels per 16 pixels image in your favorite image editor. Once you are happy with the result, save it in .gif format (Tip: you can leave some pixels transparent).

Then visit the website favicon.cc. In the left menu, you will see an Import Image button. Click it, then import your image. When you are satisfied with the result, click on the Download Favicon button in the Preview box.

Now that you have your favicon file, you need to insert it into your website or your blog.

In case you have a basic website you need to copy your favicon file in the root folder of your website and add this code between your <head> and </head> tags (update the domain name with your own):

<link rel="shortcut icon" href="http://dukeo.com/favicon.ico">

If you want to add this favicon to your WordPress blog, you need to copy the favicon file in your theme folder and add this code between your <head> and </head> tags:

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico">

Now, whenever someone will visit your blog, they will see your nice favicon in their address bar!

Learn how I made $33,543 online in the past 12 months.

Simply input your best email below to get started.

4 Comments

  1. Justin Dupre

    Grat guide! Thanks for sharing this. I’ve bookmarked this for future reference.

    1. You’re welcome!

  2. Andrea Bandle

    This is so weird. Just last week, I was looking at my bookmarks, as well as the address bar with other people’s icons and wondered how we can get an icon/logo for our site, too.

    Thank you, so much!

    1. I’m glad if my post helped :)

Learn how I made $33,543 online in the past 12 months.

Simply input your best email below to get started.

No thanks, I have enough money