Favicon Standard - 2023 - svg, ico, png and dimensions?
Leverage a universal favicon approach using a single SVG file for the majority of browsers and an ICO fallback for legacy support. Throw in a 48x48 pixel PNG version for an extra layer of reliability. The HTML tags below form an all-encompassing favicon set:
This combination ensures a broad range of compatibility across both devices and browsers, while also preserving image quality.
Building the multi-platform identity
Forget one size fits all philosophy in the realm of favicons. With an array of platforms, we are faced with diverse requirements. It's all about crafting a multi-platform identity for your website, deciphering the specific needs of each platform.
Catering to iOS :apple:
Apple devices running iOS Safari prefer a 180x180 pixel PNG image. The peculiarity is that this icon works best without transparency.
This is a no-transparency zone!
Android :robot: preferences
In the case of Android Chrome, a 192x192 PNG icon with transparency does the magic. Plus, a Web App Manifest adds a sprinkle of control over your app's appearance.
Android: The robot likes transparency, make it feel at home!
Old faithful: Desktop browsers :desktop_computer:
Let's not forget our classic desktop browsers. These old faithful still use the favicon.ico, deploying 16x16, 32x32, and 48x48 icons.
Desktop: Keep it old-school, they'll love it!
High-res displays :iphone:
High-resolution displays or Retina displays demand that you cater to them specifically. An icon dimension of 167x167 pixels should do the job.
Social media and SEO considerations
The visual representation of your website is significant when it's shared across social media platforms or appears in search results.
Social media compatibility :bird: :book:
Avoid SVG images for favicons when you need to be compatible with Facebook and Twitter. Stick with PNG or JPG formats.
C'mon twitter and Facebook don't get SVG... yet!
For a better visual presentation, use images of 1300px by 650px dimensions.
SEO magic :mag:
For Google search results a 48x48 pixel icon (or a multiple thereof) is advisable as it appears as a crisper thumbnail image in the search results.
Google: Bigger the better!
Microsoft platform :blue_square:
Consider utilizing a browserconfig.xml file tailored for Edge and IE 12 if your site caters to Microsoft platforms.
Was this article helpful?