Inspirational favicons and how to make one by Yourself

So at first - what really is favicon?

Favicon is a small 16×16px icon used to differentiate between bookmarked web sites. Favicons also show up on the URL address bar and browser tabs and that`s the great way to stand out between similar websites and also for branding - it`s like little logotype.

Advertismets

Below are examples, where icons are used :

favicon-browser

favicon-tab

So now You know what favicon really is, but how to make one by yourself?


There are of course Photoshop plugin to create *.ico file, but I would really suggest You to just use favicon generators to automate the process.

So I will cut workflow into steps:

1.  You must make 16×16px small image - it`s really small, so You can put there just very simple and remarkable shapes, so sure it is a little challenge. Save image as *.gif, *.jpg or *.png.

*comment - You can make 32×32px icon too, but that`s not really necessary - it will be shown only if user on his Bookmark/Favorite toolbar enable  it to display large icons.

2. At this step favicon generators will take place. Sure, web is full of those, but I choose only the most useful of them :

a) Nice design and very easy to use application:

favicon-generator-2


b) DynamicDrive.com as always always some good solution:

favicon-generator-3

Favicon maker- Create a favicon from any image


c) I prefer to use this generator because there`s an option to make animated favicon to make it more remarkable and conspicuous.

favicon-generator

Just upload Your image and download generated version, check animate favicon if You want to get one.

To submit favicon to Your web-page upload it on Your web-page and add the following code between <head> … </head> section :

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >

You`re done! Congratulations - refresh web-page pressing ctrl+f5 to see the changes.


Inspirational favicons :

Check out those articles - really great for ideas:

http://www.smashingmagazine.com/2007/06/14/creative-favicons-when-small-is-beautiful/

http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/

Great site. Everything about favicons You can imagine:

favicon-collage

*Updated

One good friend of mine found this nice plugin for WordPress to make Your life even easier creating favicon.

Just upload Your icon in *.jpg, *.png, *.gif or *.ico format click update button and You’re done! Make sure You look out for this one:

Spread the love:
  • Digg
  • StumbleUpon
  • Design Float
  • del.icio.us
  • Reddit
  • Mixx
  • Furl
  • NewsVine
  • Sphinn
  • Technorati
  • Google
  • Spurl
  • LinkedIn
  • MisterWong
  • Pownce

One Response to “ Inspirational favicons and how to make one by Yourself ”

  1. Inspirational favicons and how to make one by Yourself…

    Favicon is a small 16×16px icon used to differentiate between bookmarked web sites. Favicons also show up on the URL address bar and browser tabs and that`s the great way to stand out between similar websites and also for branding - it`s like little l…

Leave a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>