1stwebdesigner - Graphic and Web Design Blog » favicon generator http://www.1stwebdesigner.com 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. Sun, 12 Feb 2012 13:09:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Inspirational favicons and how to make one by Yourself http://www.1stwebdesigner.com/inspiration/inspirational-favicons-and-how-to-make-one-by-yourself/ http://www.1stwebdesigner.com/inspiration/inspirational-favicons-and-how-to-make-one-by-yourself/#comments Sun, 31 Aug 2008 09:46:05 +0000 Dainis Graveris http://www.1stwebdesigner.com/recources/inspirational-favicons-and-how-to-make-one-by-yourself/ 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:

]]> http://www.1stwebdesigner.com/inspiration/inspirational-favicons-and-how-to-make-one-by-yourself/feed/ 7