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.
