Share this article
Favicons (short for favorites icons) are those tiny little icons left of your web browser’s address bar, and are a part of your overall site branding. They show up in your web browser, but also in news feeds, so it’s important that you include one with your site. Favicons really are tiny icons; their dimensions are 16 pixels by 16 pixels—not an awful lot of space to work with. Have a look around the Web and see what other sites are using. Some icons work better than others at this small size, and simplicity is the key. Okay then, lets get started.
The ideal size for a favicon is 16×16 pixels or 32×32 pixels. These sizes are most commonly used because they display well in browser tabs and bookmarks. However, you can create favicons in larger sizes like 48×48, 64×64, or even 128×128 pixels. These larger sizes can be useful for high-resolution displays or for use in other contexts like when your site is saved to a user’s home screen on iOS.
To create a favicon in Photoshop, start by creating a new document with the dimensions of your desired favicon size. Design your favicon within this document, keeping in mind that the design should be clear and recognizable even at small sizes. Once your design is complete, save the file as a .png or .ico format.
Technically, you can use any image as a favicon, but it’s best to use a simple, clear design that represents your website or brand. Complex images may not display well at small sizes. Also, remember to respect copyright laws and only use images that you have the rights to.
If your favicon isn’t showing up, there could be a few reasons. First, make sure you’ve saved your favicon in the correct format (.ico or .png) and that it’s located in the root directory of your website. Also, ensure that you’ve added the correct HTML code to your website’s header to link to the favicon. If you’ve done all this and your favicon still isn’t showing up, try clearing your browser’s cache.
Yes, you can create a favicon in Illustrator. The process is similar to creating a favicon in Photoshop. Start by creating a new document with your desired favicon size, design your favicon, and then save the file as a .png or .ico format.
To make your favicon look good at small sizes, focus on simplicity and clarity. Use bold, contrasting colors and avoid intricate details that may not be visible at small sizes. Also, consider using a single letter or symbol that represents your brand.
Yes, you can use different favicons for different pages on your website. To do this, you would need to add the appropriate HTML code to the header of each individual page, pointing to the specific favicon for that page.
You can convert your favicon to .ico format using an online converter tool. Simply upload your .png or .jpg file, and the tool will convert it to .ico format for you.
There’s no need to update your favicon regularly unless you’re rebranding or you want to change the look of your website. A favicon is typically a long-term element of your website’s branding.
While it’s technically possible to animate a favicon, it’s generally not recommended. Animated favicons can be distracting and may not be supported by all browsers. Stick with a simple, static design for best results.
Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

source