Inspirational favicons and how to make one by Yourself

Posted in Inspiration, Tips, Web Design • Posted on 5 Comments

So at first – what really is favicon?

Favicon is a small 16x16px 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.

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 16x16px 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 32x32px 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:

So at first – what really is favicon?

Favicon is a small 16x16px 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.

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 16x16px 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 32x32px 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:

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

5 Comments Best Comments First
  • Vika

    Wednesday, February 17th, 2010 15:07

    2

    True favicon! Nice! Thx

    +1
  • affiliate

    Tuesday, February 23rd, 2010 13:32

    3

    True favicon! Nice! Thx

    0
  • Rishana

    Tuesday, May 25th, 2010 09:56

    4

    Thx for favicon! Nice

    0
  • Indri

    Saturday, February 18th, 2012 18:01

    5

    It’s very good, I like this!!!

    0
  • Indri

    Saturday, February 18th, 2012 18:01

    5

    It’s very good, I like this!!!

    0
  • Rishana

    Tuesday, May 25th, 2010 09:56

    4

    Thx for favicon! Nice

    0
  • affiliate

    Tuesday, February 23rd, 2010 13:32

    3

    True favicon! Nice! Thx

    0
  • Vika

    Wednesday, February 17th, 2010 15:07

    2

    True favicon! Nice! Thx

    +1

Comments are closed.

54.167.173.250 - unknown - unknown - US