What image file formats can I use for my logo? – Pixel Union

For most stores, PNG is the recommended file format for your logo, especially if the logo has a transparent background. JPEG/JPG can also be a good option for logos that don’t require transparency.

Shopify supports several image formats, but the formats available for a logo can depend on your theme, theme version, and the image setting used to upload the logo.

Recommended logo file formats

File format	Recommended for logos?	Best for
PNG	Yes, recommended	Logos, icons, text, and graphics that require transparency
JPEG/JPG	Yes	Logos with photographic or complex imagery that don’t require transparency
GIF	Sometimes	Animated graphics, when supported by the theme
WebP	Depends on the theme and setting	Optimized web graphics
SVG	Depends on the theme and setting	Vector graphics and scalable logos
HEIC	Not recommended	Source images that can be converted to PNG or JPEG for more predictable storefront use

For the most predictable results with Pixel Union themes, we recommend using PNG or JPEG/JPG for your logo.

Should I use PNG or JPEG for my logo?

For the most predictable results with Pixel Union themes, we recommend using PNG or JPEG/JPG for your logo.

PNG

PNG is generally the best choice for store logos.

PNG files support transparent backgrounds, making them useful when your logo needs to appear over different header colors or backgrounds. PNG also works well for logos containing text, icons, and other graphics with defined edges.

Use PNG when:

Your logo has a transparent background.
Your logo contains text or line art.
You want the logo to appear cleanly against different header backgrounds.

JPEG/JPG

JPEG is suitable for logos that contain photographs, gradients, or other complex imagery and don’t require transparency.

JPEG files don’t support transparent backgrounds. If your logo needs to blend into different header backgrounds, PNG will usually be the better option.

Can I use an SVG logo?

Shopify supports SVG files in certain areas, but this doesn’t mean that every theme image or logo setting accepts SVG files.

Whether an SVG can be used as your storefront logo depends on the theme and the setting used to display the logo.

If your Pixel Union theme’s logo setting doesn’t accept an SVG file, we recommend using a PNG version of the logo instead.

Adding SVG support to a theme setting that doesn’t provide it would require changes to the theme code. Custom code modifications are outside the scope of Pixel Union’s standard theme support. If you need this functionality, consider working with a qualified Shopify developer.

Note: Shopify may also handle SVG files differently from standard raster image formats because some image transformations, such as resizing and cropping, aren’t available for SVG files in the same way they are for PNG and JPEG images.

Can I use an animated GIF for my logo?

Shopify supports GIF images, but using an animated GIF as a storefront logo isn’t generally recommended.

Animated GIFs can have larger file sizes than static logo images, which may affect page-loading performance. Animation can also be distracting when it appears throughout the storefront header.

If you don’t specifically need an animated logo, we recommend using a static PNG or JPEG instead.

Support for GIF logos can also depend on the theme and the logo setting.

Can I use WebP for my logo?

Shopify supports WebP images and can deliver optimized image formats to compatible browsers.

However, support for uploading a WebP file directly as a logo can depend on the theme and the image setting you’re using.

For the most predictable compatibility across Pixel Union themes and Shopify logo settings, use PNG or JPEG unless you’ve confirmed that your theme’s logo setting accepts WebP.

How to upload your logo

To add or change your storefront logo:

In your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and select Edit theme.
Open Theme settings.
Locate the Logo settings.
Select or upload your logo image.
Adjust the available logo size or width settings as needed.
Select Save.

The exact settings and their names can vary depending on your Pixel Union theme and theme version.

Logo image best practices

For the best storefront results:

Use PNG when transparency is required.
Use a high-quality source image so the logo remains sharp on high-resolution displays.
Avoid uploading an unnecessarily large image. Large files can increase the amount of data visitors need to download.
Keep enough transparent or empty space around the logo only when it’s intentionally part of the design. Extra space within the image itself can make the displayed logo appear smaller than expected.
Preview your logo on both desktop and mobile.
Check the logo against different header backgrounds if your theme changes header colors between pages or when scrolling.
Add appropriate logo alt text when the setting is available to support accessibility.

Why does my logo look blurry?

A logo can appear blurry if the source image is too small and the theme needs to display it at a larger size.

Try uploading a higher-resolution version of the logo and use the theme’s logo width or size setting to control its displayed dimensions.

Avoid manually enlarging a small, low-resolution image before uploading it, as this won’t restore image detail.

What if my logo file isn’t supported?

If Shopify or your theme doesn’t allow you to select your preferred logo format, first convert the logo to PNG or JPEG and try uploading it again.

If you specifically need a file format or logo behavior that isn’t provided by the theme’s built-in settings, this would require a theme customization.

Custom code changes and custom functionality fall outside the scope of Pixel Union’s standard theme support. A Shopify developer can help assess whether the requested functionality can be added safely to your theme.