| Photoshop Tutorials » Web » Favicon |
Uploading to your server Upload your favicon using file manager or and FTP client to the location you indicated in the URL you indicated in the above code.
Join our mailing list to receive the ShowAndTell-Graphics Newsletter. You will get an email whenever a new tutorial is added, or when new Myspace layouts are created.
These icons are called favicon. These icons appears on the url box when someone visits your site or when they bookmark your site.
Buy. Download. Create. Get Adobe Photoshop now at the Adobe Store. Find Photoshop CS4 tutorials and videos on our Photoshop CS4 Tutorials Page. Try before you buy. Download any Adobe product for a free 30 day trial. Mysteries Of The Favicon.ico ? How To Create A Favicon In Photoshop A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one. All you need to add a Favicon to your site is a Windows Icon (.ico) file usually 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 (including 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. 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 plugin before you begin this tutorial. Let's Begin Because 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 it to the 16 x 16 size to see if it holds up. If it doesn't look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website's palette. When you're ready to test the design select Image>Image Size menu and enter 16 x 16. Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn't 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 re...
Finally someone who tells the students to create a bigger image, because it is easier to work with, and can be reduced later. Good job. A sensitive addendum to Favicon creation, is the creation on the animated Favicon - keep it subtle and not flashy. Special Head section code is required for two files, the animated Favicon that will activate on Firefox and Netscape, and the ico file for poor old boring Internet Explorer. You can find a tutorial and the code at http://www.cathetel.com/favicon.htm .
My first tutorial is how to create a �Favicon� for the address bar of your blog, It is a step by step tutorial of how to create and upload the �Favicon� to your blog.
Needed Materials Graphic Creating Software Basic Computer Skills Website (optional)
