A Shopify user wants to create a high-definition favicon comparable to Netflix or Louboutin’s, but finds their 32×32 favicon appears smaller and lower quality despite following Shopify’s recommendations.
Key Issue:
The user created their design in Illustrator and converted it using free online generators, resulting in a noticeably smaller favicon compared to premium brands (shown in a comparison screenshot).
Solutions Provided:
Design approach: Clarity depends more on simplicity, high contrast, and bold design rather than just size. Netflix’s favicon appears larger because it’s minimal and well-designed.
Technical implementation: Export multiple resolutions (16×16, 32×32, 48×48, 180×180) directly from Illustrator as SVG or high-res PNG instead of using free generators. Modern browsers support SVG favicons for better quality on Retina displays.
Code snippets: Contributors shared HTML link tags for implementing multi-size favicon sets, including SVG and Apple touch icons.
Tools recommended: RealFaviconGenerator.net was suggested as a reliable favicon generation tool.
The discussion remains open with no confirmation from the original poster on implementation.
Hi, I’m trying to have my Favicon as big and clear (high def) as Netflix or Louboutin.
I’m using a 32x32 as recommended by Shopify because when I go to a higher size, the icon is reduced in quality. Is there a special tool to design favicon instead of all the “Free generators” that we found on Internet?
To have my favicon I started with my design made on Illustrator and then converted is with one of the generator.
I would appreciate to get some help from the community.
Cheers.
Matthieu
Are you not trying to use your logo for the Favicon?
I might try to do the favicon on Illustrator. If you have a look at the screenshot here, you can see that Louboutin on the left is quite a big favicon when mine on the right is small even though I’m using (I think) the full 32x32 format.
Hello Community Fellows, i have solution of this thread…A favicon’s clarity depends less on size and more on how it’s designed and exported—Netflix’s looks “big” because it’s simple, high-contrast, and provided in multiple resolutions, not just 32×32. Instead of relying on free generators, export your favicon directly from Illustrator (or Photoshop) as an SVG or high-res PNG, then use a favicon tool to create a full set (16×16, 32×32, 48×48, 180×180 for Apple touch, etc.). Shopify will still use 32×32 in the browser tab, but higher-res versions ensure it stays crisp on Retina displays and mobile devices. Keep the design minimal, bold, and with strong contrast—that’s the real secret behind “big” looking favicons like Netflix.
These days High-resolution PNGs, SVGs, and multi-size icons are supported by modern browsers in addition to the outdated 32x32.ico file type. Create your favicon in Illustrator, keep it simple and bold, and export it in various sizes to maintain a sharp image (like Netflix).
Add the following in the tag:
Go to Shopify Admin > Online Store > Themes > Customize > Theme Settings > Favicon and upload your icon.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Hello @MCMatthieu ,
I hope you are well!
There are various Favicon genrator which you can check on Google. I mostly use - https://realfavicongenerator.net/