How To Make A Favicon In Photoshop

Photoshop has many uses for photography, graphic design, and digital art. If you need to, you can even make a favicon in Photoshop. You may not know what a favicon is, but you’ve seen them before — in fact, there are likely a few in front of you right now. 

A favicon is the little icon that sits next to the name of a website in the browser tab. Usually, a brand or business uses its logo as its favicon. Favicons are important as they make a site look more professional, help maintain consistent brand identity, and allow users to see where the website tab is when they have multiple tabs open.

Document Settings For Creating A Favicon In Photoshop

Because a favicon is such a small icon, you don’t need nor want tons of blank space surrounding your logo once it’s on your document. A favicon is usually 16×16 pixels. However, you’ll still want a large enough document size that you can add a high-quality version of your logo. We will start with a 64×64 pixel document.

Note: You can also check the size recommendations for a favicon on the content management system you use.

To create a favicon, you’ll need to open a new document and edit the document settings to reflect the correct size for your favicon. From the Photoshop start screen, click New File.

This will bring up the New Document window.

Ensure you’re working in pixels by clicking the unit of measurement and selecting pixels from the drop-down menu. 

Then, edit the width and height boxes to reflect a 64×64 pixel square. 

You can edit the Resolution to reflect 72 Pixels/Centimeters, as this will give the image good quality without creating a large file size. As for the Color Mode, it is best to keep RGB Color as it is the best color mode for digital purposes.

In the Background Contents drop-down menu, click Transparent.

This will ensure your background is transparent when you export the favicon.

Click Create.

Applying Your Logo & Exporting The Favicon From Photoshop

Now, you’ll want to add your business logo or designed favicon to the document (it is best not to create it in this document, as the document size will be much too small, and the quality will not be sufficient for most cases). 

Find your logo or icon within your files and drag the file over to Photoshop. It will appear in your document. In the Layers panel, you’ll see the name of the layer change to the filename of the logo.

You can move the logo around your document using the Move Tool (V).

To help with centering the logo, you can turn on smart guides, which will appear as you drag the logo around the document and help guide you to the center. Head to View > Show > Smart Guides to ensure you turned smart guides on.

The guides appear as pink lines on your document as you drag. This will automatically nudge your logo into the center of the document when you hold it near the center.

When you’re happy with the placement, export the favicon as a .png file by heading to File > Export > Export As.

You’ll notice the preview appears very small. You can use the plus and minus icons at the bottom if you want to zoom into the preview.

Click the File Format drop-down menu and select PNG.

Then, check the box next to Transparency to ensure the background is exported as transparent.

You won’t need to worry about other settings like Image or Canvas Size, as you’ve already set the size of your canvas accordingly. I suggest you keep the Color Space settings as they are so that you don’t alter the color scheme of the final product. Click Export when you’re done.

Uploading Your Favicon To Your Website

While some say an ICO file is required to upload a favicon to your website, a png file will work fine, particularly on common platforms like WordPress, Squarespace, and SmugMug. However, each site builder may have different requirements for favicons, so you’ll want to double-check your specific platform. Here is a quick list of links to the favicon requirements for the most popular site-builders.

What Should Be Included In Your Favicon?

Think of your favicon as a little piece of your site’s personality. You want the favicon to reflect something about your website or business. Many businesses use a smaller version of their logo or the logo mark/symbol (as in the above example), and it is best to use your brand colors to maintain a cohesive brand identity. 

It is best to keep your favicon simple, as anything too busy or confusing might appear unprofessional or unattractive. Words don’t work when scaled down, so avoid adding in unnecessary elements, such as words in your favicon. The goal is that the favicon sticks in people’s minds and immediately makes one think of your brand or product.

Article By

Brendan Williams

Hey, I'm Brendan! I'm a professional photographer and photo retoucher who has spent the majority of his career shooting or retouching outdoor lifestyle and social media campaigns for brands like G-Adventures, xoxo Bella, P&G, Fitbit, Chevy, Tourism California, and more. You can view my photography portfolio here.

These days I primarily focus my efforts on this site, creating guides and tutorials that I wish I had earlier in my career. Each week I publish new tutorials on Photography, Photoshop, Lightroom, and Canva to help you unlock new skills and bring your creativity to new levels! Everything you learn here is backed by real experience, so you can finally skip the fluff and focus only on what matters.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

Continue Reading:

How To Whiten Teeth In Photoshop (2 Easy Ways)

Discover two surprisingly easy ways to whiten teeth in Photoshop with the help of a few beginner-friendly sliders.

How To Use Gradient Maps In Photoshop

Learn the ins and outs of how to use gradient maps in Photoshop to color grade your photos and transform your images for the better.

How To Make A Silhouette In Photoshop (2 Best Ways)

Here are two easy ways to make a silhouette in Photoshop. The first method creates a silhouette graphic, while the second in more realistic.

Adobe Lightroom System Requirements For Mac & PC

Here's a breakdown of the system requirements for Adobe Lightroom Classic and Lightroom CC to make sure it will run smoothly on your computer.

How To Add A Watermark In Lightroom Classic & CC

Learn how to add a text or graphic watermark to a photo in Lightroom Classic and Lightroom CC to protect your photos from theft.

How To Use Dehaze In Lightroom

Learn how to use dehaze in Lightroom along with five different ways you can use the dehaze tool to improve your images in Lightroom.

35+ Best Fonts For Logos In Canva

Here's a list of the best fonts for logos in Canva to help give you inspiration in your next logo design!

How To Create Curved Text In Canva

Learn how to quickly create curved text in Canva desktop and mobile with just a few clicks to spruce up any design!

35 Best Fonts For Teachers In Canva

Discover the best fonts for teachers in Canva to help with your next worksheet or presentation for your class!

The 9 Best SD Cards For Sony

Discover the best SD cards for Sony to find the most reliable and best valued memory cards for your photo and video needs.

The Best Canon Lens For Low Light (10 Top Picks)

Get a complete view of the best Canon lenses for low light photography and video along with tips to make the right buying decision.

Affinity Photo VS Photoshop – Which Should You Choose?

Let's take a deep look at the similarities and differences between Affinity Photo and Photoshop to see which program you should pick.