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.

What Is A Favicon?

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!

Once 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?