How To Create A (Favicon.ico) In Photoshop

ico
Favicon is a little custom icon that appears in web browser’s address bar next to a web URL. They also show up in your bookmarked sites, on the tabs in tabbed browsers, Internet shortcuts on your desktop and other folders in Windows. All you need to add a Favicon to your site is a Windows Icon (.ico) file wich is called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF including animated ones or PNG with full transparency instead. But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one.
How to Download The Plugin
You’ll need the Windows Icon (.ico) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons with 8-bit alpha channel. Make sure to install the plug-in and restart your software before you begin this tutorial.

Let’s Begin

icBecause 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File>New, and opening a new canvas that is 64 x 64 pixels in size.

The Design
If you already have a logo you should reduce size to the 16 x 16 pixels to see if it holds up. If it doesn’t look good at this size, work with the 64 x 64pixels canvas and try creating a simple design that integrate with colors from your website’s palette.

When you’re ready to test the design select Image>Image Size menu and enter 16 x 16 pixels. Click on Resample Image and choose “Bicubic Sharper” from the drop-down menu (CS or latest versions only for this step). This is the best setting for making sure that an image doesn’t get blur as it’s being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.

If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries for required result.

Saving The Custom Icon

saveGo to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pull down menu. This format will only be available in Photoshop after you download and install the plug-in properly. In the next step you’ll need to upload this new file to the root folder of your website, so it’s a good idea to navigate and save it to that location on your hard drive.

Uploading of Favicon.ico File
Connect to your ftp server and upload your Favicon.ico file to your website. Make sure You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. The standard location is the “root folder” of your site, which is same directory as your home (index) page don’t place it inside an images directory or other folder. If you put it there most browsers will find (favicon.ico) file automatically.
But some browsers will look for a direct link in the HTML source code to your site’s favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.
Here is the link code to include: <link rel=”Shortcut Icon” href=”/favicon.ico”>
Once you’ve added this code, upload all of your modified pages.

(Some people suggest that the following is actually more correct: <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> You can use both if you want!)

If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):
<link rel=”icon” href=”/favicon.png” type=”image/png”> or
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

Testing
If your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put a ‘?’ at the end of the url, which will trick a browser into thinking the page is new and not cached.

>>  Here is a great tutorial link that will help you create favicon and other details

like Troubleshooting, Multi-Resolution Favicons, Inspiration. Click Here

Here  are some other links tht will help you in creat one

1. http://www.genfavicon.com/

2. http://www.favicon.cc/

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • BlinkList
  • DZone
  • Facebook
  • Furl
  • Google Bookmarks
  • LinkedIn
  • Live-MSN
  • Mixx
  • MySpace
  • NewsVine
  • Propeller
  • Sphinn
  • Technorati
  • TwitThis
  • YahooBuzz

19 Responses to “How To Create A (Favicon.ico) In Photoshop”

  1. How To Create A (Favicon.ico) In Photoshop | Designs Collage | Drakz upload Online Service Says:

    [...] the original here: How To Create A (Favicon.ico) In Photoshop | Designs Collage Share and [...]


  2. How To Create A (Favicon.ico) In Photoshop | Designs Collage | Drakz Free Online Service Says:

    [...] How To Create A (Favicon.ico) In Photoshop | Designs Collage Share and [...]


  3. How To Create A (Favicon.ico) In Photoshop | AboutBrowsers.info Says:

    [...] More: How To Create A (Favicon.ico) In Photoshop [...]


  4. How To Create A (Favicon.ico) In Photoshop | PhotoshopDaily.info Says:

    [...] See the rest here: How To Create A (Favicon.ico) In Photoshop [...]


  5. seo company Says:

    this is the way to go for folks who can put in just a little time in getting the job done themselves…afterall, it’s not rocket science…I get calls from people all the time who just don’t want to bother and I cant understand why.


  6. PEDRO GOICO. New Media Developer´s Blog. » FAVICON. Says:

    [...] Create a Favicon ( Favicon.ico) in Photoshop. Share var button = document.getElementById('facebook_share_link_6706') || document.getElementById('facebook_share_icon_6706') || document.getElementById('facebook_share_both_6706') || document.getElementById('facebook_share_button_6706'); if (button) { button.onclick = function(e) { var url = this.href.replace(/share.php/, 'sharer.php'); window.open(url,'sharer','toolbar=0,status=0,width=626,height=436'); return false; } if (button.id === 'facebook_share_button_6706') { button.onmouseover = function(){ this.style.color='#fff'; this.style.borderColor = '#295582'; this.style.backgroundColor = '#3b5998'; } button.onmouseout = function(){ this.style.color = '#3b5998'; this.style.borderColor = '#d8dfea'; this.style.backgroundColor = '#fff'; } } } dtsv.dtse_post_6706_permalink = 'http://pedrogoico.com/2010/02/19/favicon/'; dtsv.dtse_post_6706_title = 'FAVICON.'; [...]


  7. forex robot Says:

    nice post. thanks.


  8. jermanelem Says:

    observations dissolved beginning different report relative features [url=http://www.walsh.edu]pnas region inc[/url] http://news.mongabay.com


  9. Cool Wordpres How to Videos and Plugines | Hillbilly Direct Says:

    [...] How To Create A (Favicon.ico) In Photoshop | Designs Collage [...]


  10. buy levitra online Says:

    http://www.jtoconsulting.com/ business insurance rate [url=http://www.jtoconsulting.com/] business insurance company [/url] business insurance rates [url=http://www.jtoconsulting.com/] business insurance rates [/url] levitra online [url=http://www.teservicesinc.com/] levitra online [/url]


  11. slot machine games Says:

    http://www.slot-machine–games.com/slots blackjack [url=http://www.slot-machine--games.com/roulette] roulette [/url] poker [url=http://www.slot-machine--games.com/poker] poker [/url] levitra online [url=http://www.teservicesinc.com/] levitra online [/url]


  12. blackjack games Says:

    http://www.garzasprocessservice.com/ slot machine games [url=http://www.garzasprocessservice.com/] slot machine game [/url] slots [url=http://www.petite-cnp.com/] slots [/url] levitra online [url=http://www.teservicesinc.com/] levitra online [/url]


  13. levitra online Says:

    http://www.wish-fountain.com/ slots [url=http://www.radekerocksonline.com/] slots online [/url] online slots [url=http://www.radekerocksonline.com/] online slots [/url] levitra online [url=http://www.teservicesinc.com/] levitra online [/url]


  14. Carolyn Carnrike Says:

    Howdy there,I discover that your web log is really beneficial and useful and we were curious if there is a possibility of acquiring More article content like this on your website. If you willing to aid us out, we can be willing to compensate you… Yours, Carolyn Carnrike


  15. Sheryl James Says:

    It really helped me made one favicon,
    thanks for the knowledge sharing.


  16. Lizzette Dorner Says:

    I really was enjoy reading your blog, great stuff. I’m happy that I went right here.


  17. Michel Hlad Says:

    recommand. I’ve found here exactly what I was looking for.


  18. Lia Mchone Says:

    It’s really interesting article and very nice point of view. I’m happy that I step in right here.


  19. Olin Stemmler Says:

    A good logo is worth a hundred words. And it’s a truth, really …


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get Adobe Flash playerPlugin by wpburn.com wordpress themes