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 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 before you get it right.
Saving The Custom Icon
Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. 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 now.
Uploading The Favicon.ico File
Connect to your server and upload your Favicon.ico file to your website. 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, not inside an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.
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.
Troubleshooting
Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then "jiggle" it a bit and let go. That will reload the page and should get the new favicon to show up.
Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won't help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User>Library>Safari>Icons. On the Windows version of Safari, find C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)
On FireFox, clear the cache and restart the browser. On Opera, just refresh.
Windows can actually be the most beligerent about not updating favicons for Internet shortcuts (on your desktop, for instance). This tip from www.vistax64.com/tutorials:
1. Right-click on the Desktop.
2. Select Personalize and select Display Settings (or simply Settings on XP).
3. Change the Color from 32 bit to 16 bit and click Apply.
4. Change the Color back to 32 bit and click Apply.
File Format Not Available: The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.
Troubleshooting Update
One person who had trouble with Internet Explorer 7 has sent us a little tip:
I had some trouble with IE 7 — but the addition of these 2 lines of code solved the problem:
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
I found the info here:
www.webmasterworld.com/html/3251565.htm
And Shareef sends this in: In my experience, Internet Explorer seems to be a bit flaky in the length of time it takes before deciding to display the favicon. I have tried many variations in the code, but the majority of the time the favicon won’t display immediately.However, I recently discovered what may be a helpful tip: Once you place the code in your web pages and upload the favicon.ico file to your server, navigate to the favicon.ico file (www.yoursite.com/favicon.ico) and the browser (IE 7) will immediately display the favicon and keep it there.
Multi-Resolution Favicons
So if you’ve gotten this far, you can already see your favicon in your browser’s address bar, and it probably looks great. Feeling ambitious and want to go one step further?
In Windows especially, favicons show up all over the place. For instance, if you put a shortcut to a website on your desktop, Windows often uses the favicon of the site as the shortcut icon. But on the desktop, Windows uses a much larger size icon, usually 48x48 pixels. When this happens, Windows has to scale up your favicon and it will probably look blurry and not so great anymore.
You can fix this. One of the neat things about .ico files is that they can contain multiple versions of the icon, at different sizes and color depths (kinda like an animated GIF contains multiple frames). When they do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16x16, 24x24, 32x32 & 48x48 pixels are most common, and all can put bundled together in a single .ico file.
Creating a multi-resolution icon isn't much harder than what you did to create your 16x16 favicon, Telegraphics, the same place you got your favicon plugin, also has another plugin http://www.telegraphics.com.au/sw/info/icobundle.html (temporarily unavailable) that allows you to bundle multiple icons together in a single .ico file. (There are also many standalone tools that will create a multi-resolution icon for you from a single starting image. Here's a couple that are free to try: www.sibcode.com/icon-studio and www.aha-soft.com/anytoicon.)
As for color depth... again, if you're on Windows, you may have noticed before that some icons on your desktop have jaggedy (aliased) edges, while others blend smoothly on the edges. The smooth blending is because those icons contain a version with 32-bit color depth, which allows true transparency, just like your layers in Photoshop. You can create a 32-bit version of your icon, along with 24-bit (16 million colors, gif-like transparency), 16-bit (256 colors) or even 8-, 4- or 2-bit... all of which could again be stored in one .ico file!
So if you want to make sure your favicon looks great wherever people might see it, try creating a few versions in your favicon.ico file. For example:
16x16, 16-bit (256) colors
16x16, 32-bit colors
32x32, 16-bit (256) colors
32x32, 32-bit colors
48x48, 16-bit (256) colors
48x48, 32-bit colors
But don’t go too crazy, because every variation makes your favicon a little bit bigger, which means it will take longer to download.
Inspiration
If you need some inspiration have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine. You might find something that triggers an idea for your own.
That's it. Enjoy your Favicons!
Photoshop CS4 & Photoshop CS4 Extended - Best Deals From Adobe
Photoshop CS4 and Photoshop CS4 Extended feature a newly refined, tab-based interface in a single, integrated window, with self-adjusting panels arranged in docked groups. Automatically keeping tools well organized and away from your work area means you get greater efficiency, less clutter, and better results, faster than before.
Delivering all the features of Adobe Photoshop CS4 software, including the new Adjustments and Masks panels, Adobe Photoshop CS4 Extended also provides breakthrough 3D editing and compositing power to paint directly on 3D models, create 3D animations, convert 2D images to 3D objects, and more; richer motion graphics editing; and more powerful and flexible image analysis and tracking. Learn more on our Photoshop CS4 Tutorials Page. To download the free trial, see details on our Photoshop CS4 Free Trial Download Page.
Find upgrade options and package deals at the Adobe USA Store. Teachers and students get special pricing at the Adobe Education Store. You can also buy in your country currency and language at the following Adobe International Stores:
Adobe United Kingdom | Adobe Germany | Adobe France | Adobe Eastern Europe
Adobe Creative Suite 4 Design Premium - Complete CS4 Bundle
Adobe Creative Suite 4 Design Premium software is the designer's dream toolkit for print, web, and mobile publishing. Creativity is rarely confined to one medium, so put your vector illustrations in motion, moving fluidly between Adobe Illustrator CS4 and Adobe Flash CS4 Professional. And use Adobe Photoshop CS4 Extended to design and slice a web page for publishing with Adobe Dreamweaver CS4.
Adobe Creative Suite 4 Design Premium combines essential tools for producing everything from professional page layouts to rich interactive experiences in a unified, intuitive environment. Also includes Adobe Acrobat 9 Pro, Adobe InDesign CS4, plus Adobe Fireworks CS4.
Buy now or download the free trial at the Adobe USA Store, or buy in your country currency and language at the following Adobe International Stores:
Adobe United Kingdom | Adobe Germany | Adobe France | Adobe Eastern Europe
Photoshop Web Template — Web Site Design Tutorial
Learn how to make a Photoshop web template with this web site design tutorial. Includes finished web page with code and links to free resources.
Pixel Fonts To The Rescue — How To Use Them & Where To Get Them
Graphic designers working on web projects often complain that when typefaces designed for print are set to lower sizes that they become harder to read and unattractive to the eye. Even using anti-aliasing (the smooth option in the Character Palette) is not enough to help these fonts look better on screen. The solution when this happens is to abandon the printer fonts altogether and to try using a Pixel font, which will produce a crisp, clean image at very small sizes.
Blog Templates & Blog Design Tips
This Photoshop tutorial offers tips on how to improve blog templates by adding your own design elements. Includes a list of free blog resources, and a martini recipe.
The Photoshop Blog offers the latest Photoshop and Digital Photography news and software updates, tips and tutorials, and random thoughts from graphic artist, digital photographer and Photoshop expert Jennifer Apple.
Photoshop Masking Plugin Fluid Mask 3 - Price Drop And Exclusive $20 Instant Discount - Now Only $129
The 4 1/2 out of 5 star review of Fluid Mask 3 at MacWorld begins by saying that this "Photoshop plug-in takes the pain out of extracting backgrounds," and goes on to recommend the latest version, stating that "Fluid Mask 3.0.2 is a very effective tool for separating objects from their backgrounds. It offers a variety of useful features for tackling almost any difficult image, from wispy hair to complex foliage. Online video tutorials and live training sessions help ease the learning curve."
Our friends at Vertus, the makers of Fluid Mask 3 Photoshop Plugin, have set up a special exclusive discount for PhotoshopSupport.com. Buy now for only $129. Just follow this discount link and instantly get $20 off your purchase of Fluid Mask 3.
Fluid Mask 3 is designed for photographers, image editors, graphic designers and all those who take digital image editing seriously. In a streamlined interface and workflow, Fluid Mask 3 instantly shows key edges in the image and provides comprehensive easy to use tools that work with difficult-to-see edges and tricky areas like trees & lattices. Fluid Mask will also preserve all-important edge information for a professional quality cut out. Simply follow this discount link and pay only $129 for Fluid Mask 3.
Exclusive onOne Software 20% Instant Discount Coupon
Enter our exclusive discount coupon code - PSSPPT06 - during the checkout process at onOne Software for an instant 20% discount on any onOne product. This includes Genuine Fractals and their amazing Photoshop Plug-In Suite.
onOne Software's Plug-In Suite combines full versions of six essential software tools — Genuine Fractals Print Pro, PhotoTools Pro, PhotoFrame Pro, Mask Pro, PhotoTune and FocalPoint — an affordable combination that includes everything a photographer needs to make their images look their best.
Why do you need plugins? Photoshop is an amazing image editing application that has forever changed graphic design and digital photographic editing, but like any tool, if you don't have time to fully learn it, you can't get the most out of it.
Plugins for Photoshop allow you to either do something that you cannot do with the features included in Photoshop or they allow you to do something easier, faster or better than you could do in Photoshop without the plug-in. Whether it is color correction, resizing, masking or creating an effect, you can find a Photoshop plug-in that can help you be more efficient with your time.
Nik Software 15% Instant Discount - Exclusive 15% Coupon
Enter our exclusive discount coupon code - NIKPSS - during the checkout process at Nik Software for an instant 15% discount on any Nik Software product. This exclusive discount coupon code can be applied to all the latest Nik Software Photoshop plugins, including Silver Efex Pro, Color Efex Pro, Viveza, Sharpener Pro, and Dfine.
Color Efex Pro 3.0
52 photographic filters with over 250 effects for professional quality images.
Completely Original. Completely Indispensable.
Nik Software Color Efex Pro 3.0 filters are the leading photographic filters for digital photography. The award-winning Color Efex Pro 3.0 filters are widely used by many of today's professional photographers around the world to save time and get professional level results. Whether you choose the Complete Edition, Select Edition, or Standard Edition, you’ll get traditional and stylizing filters that offer virtually endless possibilities to enhance and transform images quickly and easily.
Patented U Point technology provides the ultimate control to selectively apply enhancements without the need for any complicated masks, layers or selections. Control color, light and tonality in your images and create unique enhancements with professional results. With 52 filters and over 250 effects found in Color Efex Pro 3.0, you can perform high quality retouching, color correction, and endless creative enhancements to your photographs. Download a free Trial version.
Viveza
The most powerful tool to selectively control color and light in photographic images without the need for complicated selections or layer masks.
Two of the most important factors in creating great photography are color and light. Mastering the art of selectively correcting or enhancing each of these is now possible for every photographer without the need for complicated masks or selections, or expert-level knowledge of Photoshop. Integrating award-winning U Point technology, Viveza is the most powerful and precise tool available to control light and color in photographic images.
U Point powered Color Control Points, placed directly on colors or objects in an image (such as sky, skin, grass, etc.), reveal easy-to-use controls that photographers can use to quickly adjust brightness, contrast or color in a fraction of the time needed by other tools. With Viveza you’ll spend more time shooting photographs and save hours of image editing. Download a free Trial version.
Silver Efex Pro
Complete power and control to create professional quality black and white images in one convenient tool.
Silver Efex Pro from Nik Software is the most powerful tool for creating professional quality black and white images from your photographs. For the first time, all the advanced power and control required for professional results have been brought together in one convenient tool.
Featuring Nik Software’s patented U Point technology to selectively control the tonality and contrast of the image, Silver Efex Pro includes advanced imaging algorithms to protect against unwanted artifacts, a comprehensive collection of emulated black and white film types, a variable toning selector for adding traditional toning techniques, over 20 one-click preset styles, and a state-of-the-art grain reproduction engine that help produce the highest quality black and white images possible from your color images while providing more freedom to experiment. Download a free Trial version to use Silver Efex Pro.
Enter our exclusive discount coupon code - NIKPSS - during the checkout process at Nik Software for an instant 15% discount. This exclusive discount coupon code can be applied to all the latest Nik Software Photoshop plugins, including Silver Efex Pro, Color Efex Pro, Viveza, Sharpener Pro, and Dfine.
Adobe Photoshop Lightroom Available At The Adobe Store
Adobe Photoshop Lightroom software is the photographer's essential toolbox for managing, adjusting and presenting large volumes of digital photographs. With new enhancements such as dual-monitor support, radical advances in non-destructive localized image correction, and streamlined search capabilities, Photoshop Lightroom is a compelling upgrade that simplifies photography from shoot to finish. Visit the Adobe site to download a free 30 day Photoshop Lightroom trial free download.
As Adobe’s first application to support 64-bit for Mac OS X 10.5 Macintosh computers with Intel processors and Microsoft Windows Vista 64-bit operating systems, Lightroom also provides improved memory performance for dealing with large scale images. Find the latest Lightroom 2 tutorials on our Photoshop Lightroom 2 Tutorials page.
Photoshop CS4 Book - Photoshop CS4 Essential Skills - By Mark Galer And Philip Andrews
Brimming with beautiful pictures, Photoshop CS4 Essential Skills guides you through a project-based, progressive curriculum so that you can build all the essential skills to enhance photographs creatively and professionally with Photoshop CS4. If you are an aspiring professional or a student learning photography, digital imaging, or design graphics, you'll be amazed at the stunning results you can achieve. A DVD is included free.
The Essential Skills Photography Series from Focal Press uniquely offers a structured learning experience for photographers of all ages, with both the underlying theory and loads of invaluable 'how to' and real-life practice projects - all from the most talented photography practitioners/educators in the world.
Read 2 free sample chapters:
Skin Retouching Tips In Photoshop CS4
Transforming Smart Objects In Photoshop CS4
Find more Photoshop CS4 tutorials on our Photoshop CS4 Tutorials Page.
Read 2 free sample chapters from the Adobe Photoshop CS3 version:
Adjusting Exposure in Adobe Camera Raw CS3
Photoshop CS3 Tutorial High Dynamic Range
Find More Adobe Photoshop Books at Amazon.com
Find all the latest bestselling Photoshop books at discount prices at Amazon.com.
Buy. Download. Create. Get Adobe Photoshop now at the Adobe Store.
