How to Create A Favicon in Photoshop
Favicons
Favicons are little custom icons that you see in your browser’s address bar next to the URL of your favorite website. If you take a look at your address bar, you should be able to see Bright Hub’s favicon, which is a bright yellow rectangle, like an exclamation point.
Besides your browser’s address bar, favicons also show up in your bookmarked sites, on your browser tabs, and also as an icon on your desktop for internet shortcuts. They are a great way to help reinforce your website’s brand or logo, and can easily be created in Adobe Photoshop.
Getting Started
First you will need to download the Photoshop plugin for the Windows Icon (ICO) file format. This plugin will work with your designed image by correctly exporting it to the .ico format which all browsers are able to read. Make sure to install the plugin before going any further.
The Design
Favicons are very small – only 16 by 16 pixels. It is very difficult to do a creative design on such a small canvas. Instead, a better way would be to start with a larger canvas and resize it later. Be sure to select a multiple of 16 so that the proportions remain the same. I recommend a canvas of either 64 x 64 pixels, or 80 x 80 pixels.
Open up Photoshop and click on File. Select “New”, and create a canvas of 80 x 80 pixels. If you have an existing logo that you’d like to use, you could resize it down to 16 x 16 pixels, and see if it looks good. If not, you may need to come up with a new, simple, creative design that uses your logo colors and can represent your site.
Once you have your design ready, you need to test it out to see if it still works when it’s resized to 16 pixels. Click on “Image”, and then select “Image Size”. Enter the new size of 16 x 16. For Photoshop versions CS or higher, click on the “Resample Image” drop down menu, and select “Bicubic Sharper”, to prevent any blurriness that may occur during the resizing. If your favicon does not look good after resizing, you may need to keep adjusting the design to make it work. Remember, simple graphics with high color contrasts work best.
Exporting Your Image
Once you have your graphic exactly as you want it, go to File, and select “Save as”. Under format, choose Windows Icon (ICO), and save your file as favicon.ico. If you properly downloaded and installed the plugin before starting Photoshop, the Windows Icon format should show up properly.
Uploading Your Favicon
Connect to your website server, and upload your favicon.ico file to the root of your site, where your index page is. Make sure that it is not in any other image folder, as most browsers will find and read the favicon.ico file in your root directory.
You can also help browsers find your favicon file by placing a link to it directly in the header section of each web page on your site. Add the following code to your header section: . After modifying all of your pages, upload them to your site.
Test out your nifty new favicon by visiting your site and refreshing the page, or clearing out your browser’s cache!
