COMPLETE FAVICON DESIGN GUIDE WITH INSTRUCTIONS FOR PNG, ICO AND SVG
31 of May 2017
NoraA favicon is the tiny icon that appears on the left in the browser tab when somebody is viewing any of the pages of your website. Most website creators don’t spend much time creating and implementing the favicon. This tiny design element however, plays a great role in your brand’s identity. Consider how often you have multiple tabs open in your web browser. Even those of you out there who have sworn off multitasking know how often they have a multiple browser tabs open.
A well-designed favicon can make it easy to navigate back to the pages that you want to view, even without reading the text on the browser tab. You can give your website a more solid brand identity by spending some time on this little bitty icon. After all, this icon appears on every webpage you publish!
HollieBack in the day, when Google analytics was still just a dream, many website owners used the favicon to estimate the traffic to their sites by tracking the amount of people who added the site to the their bookmarks. These days the favicon is more about the user experience.
The favicon should be a graphical representation of your brand. While it may be tiny, it can help your brand stand out in a big way. Websites that don’t design and implement a custom favicon resort to using the default icon for the platform used to develop the website. Using this default icon can make your project look overall unpolished and unprofessional.
Make sure you aren’t distracting the user from all the great content that you offer on your website by implementing the favicon in all of the necessary places of your site’s code. After you complete the SOP available for free above, you’ll not only have all the formats needed for your favicon but you’ll have the HTML code needed to implement the favicon on your website.
FAVICON FORMAT GUIDELINES
NoraDue to the limited space for the favicon you shouldn’t just stick in any image, like your brand’s logo, and expect it to look good when made into a favicon. You should make sure you have a designer create the image specifically for the favicon space so that it looks great in all of the following places:
- Classic desktop browser
- Mac OS Safari
- Windows 8 and 10
- Android Chrome
- iOS Safari
All of the instructions and specifications for creating a favicon for each of these places are included in the SOP above and they are extremely easy to follow. We found a free tool that makes this daunting task quick and painless without you having to sacrifice any opportunities for brand awareness.
HollieBecause this is an important but often overlooked aspect of your website, it’s important to have a designer take a specific visual feature from your website or logo to create a relevant and eye-catching icon. This isn’t a very time intensive task, and if the designer uses the SOP provided above then the task becomes even faster. While you may be on a tight budget, getting this done right should not break the bank.
NoraPass this SOP directly to your designer and they will have all of the latest requirements and constraints of a favicon so that you don’t have to worry about assembling them yourself. Using the SOP, your designer will be able to create a favicon in all of the formats needed for the various browsers, tablets, mobile phones, etc. without wasting time.
HollieOnce you or your freelancer has followed the SOP to generate your favicon in all file types and sizes needed, you can implement it on your website. Give the icon a final check to make sure it looks the way you want it to on every platform. This is fast and easy to do by using this free favicon checker tool.
The checker will show you how your favicon will look in all places on the web, including on Microsoft’s tablet computer and Safari’s pinned tabs, both of which have more unusual favicon requirements.
Download the SOP above to get started today. A good designer will get your favicon back to you in no time. Best of luck on your website!