How to create a Favicon.ico

My friend MK007 sent me a very cool link a couple of days ago and I thought it would be a great tool to share.  One of the tips that I see very often to help popularize a blog or any website, is to have a “favicon”.  The Favicon is the little icon that appears at the top of your browser, right beside the URL of the web page you are currently viewing.  It will also show up in the bookmarks beside your site to  make it easier to spot.  The one for Techforlunch is: …the same as my logo on the about page.  You should be able to see it at the top of your browser right now, granted your browser supports favicons.  Internet Explorer 6 does not support them.

Favicon maker- Create a favicon from any image

Favicon Maker is a very easy to use web site to help you create your own icons. Simply upload an image that you want to use and it will be converted for you to the correct format.  A favicon is always 16×16 so that’s the size that will be used, but you can also specify if you want the file to contain a 32×32 and/or 48×48 icon.  What’s the use for that you say?  Well, basically the favicon.ico is a simple icon file and icon files can contain more than one size for the same icon.  For example, in windows you will see the same icon in more than one size if you look at a file on “details” mode and in “thumbnails” mode.  It’s the same icon file, but you see a different size.  If you are only going to be using that favicon for your site though, don’t bother getting the other two size as they will only make the favicon larger to download every time.

Once your file is created, simply download it and upload it to your website.  Most blogs and Content Management Systems support favicons right away, but you may need to modify the template you are using or the html files if the favicon doesn’t show up.  Just make sure that the HEAD section of your page contains the following code:

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

Make sure the path to the file is modified accordingly and you should be good to go!  The website also explains this pretty well.  Feel free to drop me a line if you need help with this.

7 Thoughts on “How to create a Favicon.ico

  1. Thanks Oliver!

    I like the layout of your site.. very clean and sleek.

  2. If you are using those two websites for icons search, you are in business:

  3. Agreed. The two web sites mentioned above are very useful when you need to find an icon.

  4. Pingback: » Google changes it’s new old Favicon ??!!? » Tom Doyle :: TALK

  5. Bernhard Huber on July 21, 2013 at 11:07 am said:

    Having read this I believed it was really informative.
    I appreciate you taking the time and effort to put this
    informative article together. I once again find myself personally spending
    way too much time both reading and leaving comments.
    But so what, it was still worthwhile!

Leave a Reply

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

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>

Post Navigation