#HOW TO MAKE A FAVICON IN PHOTOSHOP HOW TO#

When you’re asked: Are you sure you want to change the extension from “.png” to “.ico”?, click Use. So, we’ll change our icon’s file extension from. Save the file as favicon.png.īy default, most web servers are configured to accept favicons with the file name favicon.ico. Save your icon as a PNG file and use PNG Compression. Scale your image down to 16x16 pixels and click OK.įrom the File menu, select Save for Web.

#HOW TO MAKE A FAVICON IN PHOTOSHOP HOW TO#

To learn more about creating icons, check out these Macinstruct tutorials: How to Make Mac Icons and A Behind-the-Scenes Look at Mac Icon Design.įrom the Image menu, select Image Size. Favicons are small, so keep your shape simple! Your favicon may look better in some browsers than others. You’ll notice that we used a gloss on our icon, but in reality, it probably won’t show up very well. For our example, we started with a 500x500 pixel square and created our own image. If it’s not, you’ll need to open Photoshop and crop it so that it’s square. Start by making or using any image you want to use as your icon. It’s easy to make these little icons with your favorite graphics editor. Now, your website can have a favicon, too. These favicons - or “favorites icons” - are more fun to look at than they are functional, but almost every website has one these days. Have you ever noticed those little icons in the address bar of your web browser? They also appear next to your bookmarks, and sometimes next to the items in your RSS feeds. AirPort Apple Apps Backups Developer Education Email Hardware Internet iPad iPhone Mac Music Network Photos Security TV Weekend Wonk

How to make a favicon in photoshop