Learn How To Convert a PNG to ICO file Using Photoshop

So you want to learn how to convert a PNG to ICO to create a favicon for your website? Great news, this article shows you how to do exactly that!

Why Convert a PNG to ICO Using Photoshop?

When I was recently redesigning a favicon for one of my websites, I would make a few edits in Photoshop at 100 x 100 pixels, reduce the size to 16 x 16, save it as a .PNG, upload it to a .ICO generator online, download it, upload it to my server via FTP, then finally preview it in my browser. After just three times through that process, it got very annoying and I finally decided to search for a way to save a .png file to ICO format directly in Photoshop. The process I found works both with Mac and Windows and just requires a small plugin file.

Any time you are designing a favicon I would suggest designing it at 100 x 100 pixels. This allows you to see what you are doing, but it’s not so big that you are including minor details that will never be seen at 16 x16. Always make sure you reduce the size of your image to 16 x 16 before saving it as a .ICO file or your favicon will be blurred when viewed in a web browser.

  1. Download the ICO (Windows Icon) Format plugin from Telegraphics. I’m sure there are many other plugins out there, but this is the one that I used and I know it is functional.
  2. If you are a Windows user, put the plugin in C:\Program Files\Adobe\Photoshop \Plug-Ins\File Formats.
  3. If you are a Mac user, put the plugin in Applications\Photoshop\Plug-Ins\File Formats.
  4. After you place the plugin in the correct folder, restart your computer and see if Photoshop will allow you to save images as .ICO.

Just open up Photoshop and use the Save As option to save your file as an .ICO.

Thank you for reading this short but hopefully helpful post.  If you have any questions please post them below in the comment section and don’t forget to like and share this page.

Get Web Design Leads

For all you web designers out there looking for leads, check out this page: https://www.omegaweb.com/web-design-leads/