How to Create a Browser Icon in Photoshop
In your internet surfing, you've probably seen the small, customized icon that appears beside many a URL in the browser window. This icon, called a favicon, is a small graphic icon saved in an "ico" format and added to the website's main directory. With a freeware Photoshop plug-in and some graphic ingenuity, you can create a customized browser icon for your website, too.
Other People Are Reading
Instructions
-
-
1
Download and install the ICO plug-in for Photoshop. You can find an open-source version at the Telegraphics website (linked to in Resources). Once you have downloaded the plug-in, unpack it and drag it into the Plugins > File Formats directory in your Photoshop applications folder.
-
2
Launch Adobe Photoshop and create a new file. Because the ICO file for your browser can only be 16x16 pixels, it may be easier to create your graphic slightly larger and then downsize it. From the File > New menu, create a file that is 32x32 or 64x64 pixels in RGB format at 72 dpi.
-
-
3
Create your icon graphic. Using as many layers as you need, compose the artwork you would like to appear beside your URL. Remember that the image will appear very small in the browser window, so make sure your design is simple and easy to read.
-
4
Resize your image to fit the favicon format and flatten it. Using the Photoshop Image > Image Size dialog box, change the dimensions of your file to 16x16 pixels, in keeping with favicon standards. You will be able to judge the readability of your image at this size. You may need to sharpen the file using the Filter > Sharpen command. If design adjustments need to be made, simply choose Edit > Undo Image Size from the Photoshop menu and edit your image. Then resize again to 16x16 pixels. Now flatten your layers.
-
5
Save your file in an .ico format. Click Save As from the File menu. In the dialog box, choose ICO (Windows Icon) from the Format drop down menu. Name your file "favicon.ico," since most browsers will automatically recognize that file name for the browser icon. Click Save.
-
6
Upload the browser-icon file to your website. Using standard FTP software or your website host's administrative dashboard, access your website main directory--the same directory where your home or index page is located. Drag your .ico file to this directory. Now your browser icon should show up in the browser window when your site is accessed. If it doesn't show up immediately, try refreshing your browser several times.
-
1
Resources
More Like This
Comments
-
Just what I was looking for. Thank you so much!
