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. 

What Should A Favicon Look Like?

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.

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)
  • 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 support other graphical formats for the favicon, in addition to .ico (PNG, GIF (including animated GIF’s)), but .ico is the most used across all browsers and thus is the standard that you should use for your website.

Create Your Favicon (.ICO) File in Photoshop

Create a new file in Photoshop. 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. Import a square version of your logo or an icon to represent your brand into Photoshop. Then copy and paste it into the new file. Use the transform tool (hold down shift to keep proportions) to resize and make sure your resized 16×16 still looks good. When you’re done, go to “Save for web” and save as a .png format at 72 DPI (dots per inch).

Covert File To .ICO via Converter Tool

Head on over to ICO converter which is a free website that converts your .png file to .ico. Click on “browse” and import the .png file you created. Select the size and bit depth and save to your computer.

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 (substitute example.com/favicon.ico with the directory where you uploaded your favicon):

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

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. Instead use an absolute path (includes domain name) as in the example above. You should be able to copy and paste this URL into your web browser and see the favicon.

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.

New comments are closed at this time.

Comments (6)