How To Create A Favicon Icon (.ICO) In Photoshop

To sustain this free service, we receive affiliate commissions via some of our links. This doesn’t affect rankings. Our review process.

How to create a faviconWhat Is A Favicon?

A favicon (also referred to as a website, url, shortcut, or bookmark icon) is the little icon that shows up to the left of the page URL you are viewing in your browser’s address bar, as well as in the corner of the current browser tab, or browser window, of the web page you are viewing.

If you have multiple tabs open, it serves as a handy visual queue to help you quickly recognize the identity of a web page. While there’s all sorts of favicon creating software out there, if you own a copy of Photoshop there’s a free plugin that will let you create favicon’s quickly and easily.

Specifications Of The Favicon Icon (.ICO File)

A favicon is a square graphic (16 x 16 pixels, although you may want to start with 64 x 64 to give your design more freedom) and ends in the .ico extension. The favicon was initially introduced in an earlier version of Internet Explorer, and only supported the .ico format.

Today, most modern browsers, with the exception of Internet Explorer (which continues to dominate, by a steadily shrinking margin, the browser market), support other graphical formats for the favicon, in addition to .ico (PNG, GIF (including animated GIF’s)), and Firefox and Opera also support JPG and PNG.

However, until Internet Explorer supports formats outside of .ICO, you’ll probably want to stick with this format. Which is why the Photoshop .ICO favicon plugin comes in handy.

Download The Photoshop Favicon Plugin

First you’ll want to head on over to our friends at Telegraphics and download the Photoshop favicon plugin. Since a bit of work went into creating this plugin, it’s much appreciated if you can spare a small ($5) donation, especially if you end up making heavy use of this application. 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). Once you’ve download the plugin (ICOFormat64.8bi), place it in Photoshop’s plugin directory (\Adobe Photoshop\Plug-Ins\) inside a directory called “Favicon” or another name of your choosing.

Create Your Favicon (.ICO) File in Photoshop

Next, load up Photoshop, and create your favicon file. While you’ll want to end up with a 16×16 pixel square, you might want to start with 32×32 or 64×64 so you have more room to work with. Then make sure your resized 16×16 still looks good. When you resample the image, select Bicubic Sharper (Photoshop CS) to prevent the image from blurring as it gets sized down.

As a general guideline, you’ll want to create a favicon that reflects the identity of your website. This can be done by creating a small icon of your logo, or part of your website or company name, and by using your website’s color scheme. You’ll want the favicon to stick in people’s heads as a little reminder of who you are.

When you’re done, browse to File -> “Save As…” -> and under the “format” selection below the file name field, you should see a new .ICO (favicon) format selection (if you don’t see it, make sure you downloaded the version of the plugin corresponding with your O/S and Photoshop versions (ie. Windows, Vista, MAC, 64-bit (CS 4)), etc. Save your file with the name “favicon.ico”, and then link it in your web page as follows.

Add The Favicon Icon To Your Web Page

Once you’ve got your favicon.ico saved and ready to go, you can add it to your website as follows. In the header of each web page, you’ll want to add the following code:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

Note that this approach uses a root relative path (the forward slash at the beginning indicates the path is relative to your document root). If you can’t get this to work, you might want to try using an absolute path:

<link rel=”shortcut icon” href=”https://www.example.com/favicon.ico” type=”image/x-icon” />

We discourage you from using a relative path (href=”favicon.ico”) because it can result in lost paths when you move your website, and is also more susceptible to link theft.

Upload the Favicon To Your Web Server

Once you’ve added the URL to your favicon file to your web page, you’ll want to make sure the favicon.ico actually resides where you specified it (in the example above, in your document root (the root folder of your website – ie. /public_html or /www on Linux servers)).

See The Favicon In Action!

Screenshot of a website favicon as displayed in a Chrome browser tabOnce you’ve done that, restart your web browser, and you should see your favicon – both to the left of the URL address bar, and in the top left corner of the web page tab you’re visiting. You can see our shiny new favicon in the screenshot next to the favicon for Google Analytics.

Is Photoshop Still The Best?

Adobe’s Photoshop may still be the industry standard photo editing software, but is it still the best? Our experts dive in and find out in our Photoshop review. Find out what the latest version of Photoshop can do as well as how it stacks up to the competition!

Were you able to create and display your new favicon?

About The Author:

Alex has been involved on the business side of the internet since the early 2000's. He holds both a Management Science degree from the University of California at San Diego as well as a Computer Science degree from NJIT.

We Rock Your Web had its roots back in 2004 as the tech blog for a web design and development company Alex founded that has grown and evolved into the parent company of We Rock Your Web.

While his foundation is rooted in web development, his expertise today lies in content and digital marketing, SEO, organic and paid search, analytics, and publishing. Alex is an avid tennis player, nature enthusiast, and hiker, and enjoys spending time with his wife, friends, and dogs.

Disclaimer: This website contains reviews, opinions and information regarding products and services manufactured or provided by third parties. We are not responsible in any way for such products and services, and nothing contained here should be construed as a guarantee of the functionality, utility, safety or reliability of any product or services reviewed or discussed. Please follow the directions provided by the manufacturer or service provider when using any product or service reviewed or discussed on this website.

Subscribe
Notify of
3 Comments
Newest
Oldest Most voted
24434everyday
May 8, 2016 12:55 pm

This plug-in no longer works with Adobe PhotoShop CC (2015)

Anonymous
March 10, 2011 4:49 am

That was great idea. Easy to create in Photoshop, and adds a lot to my website. It’s now easy to tell apart from all the other tabs I have open, and I imagine the same applies to other users. Thanks for the tutorial web rockers!

Anonymous
April 29, 2010 4:46 am

Is there any chance one day browsers will support larger, higher resolution favicons? The small favicon is fine, but it would be cool to be able to sport a better looking (maybe even an animated) favicon.