What Is A Favicon And How To Add It To WordPress Or A Static Site?

  • Share
  • SumoMe

what is a faviconIn order to distinguish yourself from other bloggers/webmaster, once you create a website or a blog, there are certain things that you need to apply to your blog or static site in order to have it ready for the public.

Among those things is creating a Favicon for your blog/static site.

What Is A Favicon?

A favicon is a small 16px X 16px icon that is displayed the moment a user starts to load your website/blog.

It is located in the tab your browser creates when you open a website, for example take a look at the tab in your browser this post you are reading right now is displayed in.

Do you see the small image what is a favicon right beside the title of the page? That is a Favicon!

Why Is A Favicon Important?

When a user bookmarks your website or whenever they open their browser address bar and your site shows up there, having a favicon displayed there will remind them of your website and makes them more familiar with your website especially if you designed a favicon that stands out.

What Should My Favicon Look Like?

Anything you want really, the possibilities are endless, however most people, especially businesses and companies create their favicon based on their logo.

In other words their favicon is a mini-version of their logo, this is the case for my blog as well, if you noticed my logo you will see it’s the same as my favicon. You can change the background of the favicon to make it display a bit more clear in the browser tab if you want but still maintain the same logo look.

What Is The Format Of A Favicon?

You can’t use any 16px X 16px image and expect your browser to show it as your favicon, it has to be one of the extensions .ICO or PNG.

If you use another image format, it might not work and even if it does work in 1 browser it won’t work for the others, so just to be safe, use either PNG or ICO extensions.

Which Extension Format Should I Use, PNG Or ICO?

It’s really up to you, however the advantages of using a PNG is that by default it is a transparent image which might work better in browsers with different color themes.

On the other hand if a user have a custom theme installed for their browser and let’s say that theme is dark in color, if you use PNG then your image might not appear clear enough because of a dark background color, thus using ICO with a predefined background color in this case solves this problem.

2 Ways To Create A Favicon

a) Create A Favicon Manually:

This is fun and simple, if you already have an image (such as your logo for example) and would like to turn it into a favicon, you can simply open it in “Photoshop” or if you don’t have Photoshop then you can use “Windows Paint” and simply re-size the image to match 16px X 16px and then save it in either of the extensions above: PNG or ICO.

b) Use An Online Generator:

There are many online generators that you can use to create a custom favicon based on any design you like.

My favorite website for creating a favicon is: http://www.favicon.cc/. This tool gives you so much control over the design, it’s just awesome.

Installing A Favicon On A Static Site

To install a favicon on a static site, all you have to do is paste the following code inside your header tags, but make sure to change the location of the favicon to the one you use.

<link rel="shortcut icon" href="images/favicon.ico" />

Installing A Favicon On A WordPress Blog

This is even easier than on a static site, all you have to do is use the plugin that I use and insert inside its settings page the link to your favicon image on your server or choose 1 of the many favicons it already provides for free and it will take care of the rest automatically.

The plugin I use is: Favicons.

Favicons are a great way to familiarize the user with your website, I highly recommend using them, especially that they’re too easy to create and install. ๐Ÿ˜€

This entry was posted in Design, General Info, Plugins and tagged by Sayed. Bookmark the permalink.

Subscribe To Get My New Posts!

I respect your privacy, NO spam I promise.

Be Cool And Show Some Love, Share!

Pin It
About

I'm a Computer Science Major at York University (Toronto). I Love programming and creating websites, my goal is to one day have my own set of Plugins/Themes created from scratch, for now I'm focused on learning about SEO and Blogging. :)

Connect with me on:

13 thoughts on “What Is A Favicon And How To Add It To WordPress Or A Static Site?

    • Thanks Blake,

      With a favicon you can give your website a unique banding as you said which is why I think it’s very important to make sure that you design it from scratch, that way it not similar or close to anything else. ๐Ÿ˜€

      Thanks for stopping by. ๐Ÿ™‚

  1. Hi Sayed,
    It is very easy to install favicon on static site or wordpress blog. I like Favicon, it makes favorites entry easier to find but it has limitations and the icon disappears when the browser cache is emptied.

    • Hey Pete,
      I’ve actually never experienced any problems with Favicon Plugin, my icon always loaded perfectly, some people had problems loading their icon because they entered a remote link to their favicon within the plugin and if that website’s server was down at any time their icon won’t load.

      I always have my images hosted on my own server to make sure everything loads with each other on time or nothing loads at all if the server is down hehe.

      Thanks for your comment.

  2. I like Favicon, it makes favorites entry easier to find but it has limitations and the icon disappears when the browser cache is emptied.

  3. Hi Sayed,

    Its good to visit your blog again after some time. Glad you’re doing good!

    Every small bit counts to build up a successful blog or website. Favicons add up the identity of a blog among the crowd. It makes readers easy to identify. The modern browsers like Chrome started to display the site title in a small tabs, and thus the titles are never displayed complete. Favicons are more important in this context to stand up on the tab bars too!

  4. The good thing of having your own Favicon is that the website will have a unique branding and identity. This will also help in making it more professional looking and reliable.

  5. I have not used any favicon in my site yet but it is very important to represent a site. Favicon added a new dimension in a site

  6. Hi Sayed,
    It is very easy to install favicon on static site or wordpress blog. I like Favicon, it makes favorites entry easier to find but it has limitations and the icon disappears when the browser cache is emptied.

  7. Thanks Sayed ๐Ÿ™‚
    i found your post very helpful but can you please tell me where i can put this code on a header or footer on my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *