Create cool Favicons in 5 simple steps!

How to create cool Favicons in 5 simple steps! Hi there. We all use and love favicons so much, so how about I show you a way to create cool favicons by yourself from scratch?  In case you are wondering what a favicon is, it’s the small icon that you see on your browser tab. In some browsers you can see it right before the URL part. These icons give your website a unique identity and help the user identify a site when multiple tabs are open. What more? these are super cute to look at.

create cool favicons

Why use Favicons?

Favicons might be tiny but they pack a punch when it comes to functionality.

Brand Recognition : As mentioned above, favicons bring a certain identity to your site and help brand your site’s image in the user’s mind.

Easy Navigation : These cute little icons help a user to navigate easily between sites  when a bunch of tabs are open.

Easy Bookmarking : Similar to above use case, favicons help a user quickly identify a site among a bunch of bookmarks.

Traffic Estimation : Believe it or not, favicons are used to calculate site traffic by counting the number of visitors who bookmarked it. This was an earlier usage of favicons but still used in some places today.

Look & Feel : Today, UI design is one of the more important aspects to be considered while building any website, mobile app etc It’s all about look & feel these days. You’d be hard-pressed to find a popular app with bad UI design nowadays. A cool favicon brings a cool,neat, professional look to your site while adding a dash of color to your browsers.

I hope I have listed enough reasons to nudge you toward making your own cool little favicon 🙂

Ok, now tell me how to create one already…

You can create cool favicons from scratch using an image editing programs like Photoshop or GIMP or any of the myriad other software available on the market. However there’s no need to complicate the creation process with such tools and we can simply use some free online tools to get the job done. One such tool I’ve come across and recommend is the online creator offered by Favicon.cc .  It’s free, fast and very easy to use. Just follow the steps below and you can have your own favicon in no time.

How to Create cool favicons of your own :

    1. Create an account at favicon.cc (not necessary but recommended as it gives the user more options like publishing your favicon etc)
    2. Go to the creator by clicking on the ‘Create your favicon‘ button.
    3. Now you are taken to a blank canvas which is where you draw. create cool favicons Don’t be scared by the word ‘draw’, it’s pretty easy. I’ve ‘drawn’ a few favicons and I’m no artist! Just pick a color from the color picker on the right side and start drawing. In this example I’ll show you how to create a simple animated logo. First, color the whole background blue(or any color of your choice). Now draw the shapes of any two letters of  that represent your site/business/enterprise. create cool favicons
    4. Now click on the use animation link below the editor – this will give you a new frame. Now click on “copy previous frame” and the previous frame design will be copied onto the current frame. Now simply color some of the squares of your choosing a different color like so : create cool favicons
    5. Repeat step 4 and this time just move the colored portion a few squares ahead like so: create cool favicons Do this for as many frames as you want.  I recommend 5 frames for a nice, smooth animation effect. You can also set the timer to control the speed of the animation. You can choose this number once you’re satisfied after viewing the preview :
      create cool favicons

      Favicon Preview Pane

      Obviously, a less number will give a faster animation effect and vice-verse. I personally use 1.5 seconds for the first frame and 0.5 seconds for the consecutive frames.This usually works for my website favicon as I want the focus to be on the main image containing the letters T & C and then a cool little animation would pop out in bright red!! TechChow Cool, No?

That’s it. Your brand new favicon is ready to be used! Just hit the Download Favicon‘ button.

Your requirements may vary, so feel free to let the creative juices flowing. Once you are done with the icon, check the result in the preview pane below.

Usage of the new favicon :  It isn’t enough to just create cool favicons, you have to be able to use them. So now that you have one of your own to flaunt, how do you use it on your site?  Well that’s the simple part. Just upload the .ico file to you website’s root directory and add the following HTML snippet in the <head> section of your site’s pages (at the very least, to the index page) :

<link href=”http://yoursiteaddresshere.com/favicon.ico” rel=”icon” type=”image/x-icon” />

*You have to replace http://yoursiteaddresshere.com with you actual site address where you uploaded the icon.

Alternate method for usage : Another method is to simply copy and paste the HTML code generated by favicon.cc‘s generator after creating your icon. This however doesn’t work for animated icons, only static icons. Simply copy the code found below the icon image in the How to add the favicon to your page ? section. Just paste this generated code in the <head> section of the page and no need to upload anything as the whole icon/image is already included in the HTML code.

If you created an account(recommended) then you can also publish your favicon under the creative commons license for others to use and distribute! Once published your favicons will be safely stored in your account and can be viewed, rated and downloaded by everyone.

A few more favicons by me.

create cool faviconscreate cool favicons  create cool favicons

So get chugging and create your own brand new favicon for free.

It's only fair to share...Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on TumblrShare on StumbleUponFlattr the author
Comments(2)
  1. Mann April 17, 2015
    • Sam April 17, 2015

Leave a Reply

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