<- Back

How to make a favicon

Adding favicon to your website

Posted in: Learned along the way
By: Blockcoder ( Admin ) / October 24th, 2011
Stats: no comments / Views: 245

About favicon

That little image which is shown next to browser tab name field is known as “favicon”. It comes from words “favourites icon”. It is 16×16 px wide and tall. It can be bigger though, for example Blockcoder’s favicon dimensions are 32×32 px. It can also be as big as 62×62 px.

Its file format can be “.ico“, “.png“, “.jpeg” or “.gif” and “.ico” is the stantard. It usually represents your website logo.

Web browsers search for favicons for example when you are saving bookmarks.

Here is a little summary about favicon:

  • called favicon
  • 16×16, 32×32 or 62×62 px size
  • formats: .ico, .jpeg, .gif, .png
  • is initialized within html <head> tag

How to add favicon to your website

Write the code below within the <head> tag and refresh browser and it should work:

<link rel="icon" type="image/png" href="http://www.domain_name.com/images/favicon.png" />

Of course, please remember to change the url and filename to correspond yours!

What I usually do

When I’m implementing a favicon to my site, this is what I usually do:

  • Make the favicon with Photoshop with 32×32 px dimensions
  • Save it to .png or .icon format
  • Name it to “favicon”
  • Implement it within <head> tag
  • Refresh browser and it’s there. If not, press ctrl + F5!

It is simple when you know what you are doing.
Thanks for reading!

Leave a Reply

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


* Copy this password:

* Type or paste password here:

2,607 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>