Understanding the importance of the Favicon

If you look at this page’s tab in your browser, next to the title, you should see the following icon:

This is called a favicon (short for “favorite icon”). It’s tiny, but it does a lot of work for your brand and for the people browsing your site. Without one, visitors see the browser’s generic placeholder icon, which makes a store look unfinished.

Let’s look at where favicons appear, why they matter for an online store, which formats and sizes to use, and how to add one to your Jumpseller online store.

Where your favicon appears

A favicon shows up in more places than most store owners expect:

• Browser tabs, next to the page title.
• Bookmarks, history and the address bar suggestions.
• Mobile home screens, when a shopper saves your store as a shortcut on their phone or tablet.
• Search results: Google shows a site’s favicon next to its name in results, so it’s often the first piece of your branding a new customer sees.

Why a favicon matters for an online store

• It gives your brand a recognizable mark. The same small icon on every page reinforces your identity, just like your logo.

• Shoppers find you faster. When someone has a lot of tabs open, comparing products across several stores, they can spot yours at a glance.

• Bookmarks and saved pages are easier to scan. The favicon helps returning customers locate your store quicker in their bookmarks or history.

• It builds trust. A missing or default icon is a small detail, but it can make a shop feel less professional at the exact moment someone is deciding whether to buy.

• It stands out in search. Since your favicon appears beside your result on Google, a clear, consistent icon helps your listing look established. It’s a small part of good SEO, not a ranking factor on its own, but it helps people recognize your store among the results.

Favicon formats and sizes

Formats

• ICO: the classic favicon format. One .ico file can hold several sizes (for example 16×16, 32×32 and 48×48), and every browser supports it.
• PNG: widely supported and easy to export from any design tool. It’s the usual choice for larger icons such as the Apple touch icon.
• SVG: a vector format that stays sharp at any size. Most modern browsers accept SVG favicons, but support isn’t universal, so keep a PNG or ICO version as a fallback.

Recommended sizes

Where it’s used	Size	Format
Browser tabs	16×16 and 32×32 px	ICO or PNG
Google search results	A square multiple of 48 px (48×48, 96×96, 144×144…)	Any valid favicon format, including SVG
iPhone and iPad home screen (Apple touch icon)	180×180 px	PNG
Android home screen and web app shortcuts	192×192 and 512×512 px	PNG

The common thread: always use a square image. If you only make one file, start from a large square version (512×512 works well) and scale it down, rather than stretching a small icon up.

How to design a favicon that works

• Simplify your logo. A full logo with a wordmark becomes an unreadable smudge at 16 pixels. Use the initial, a symbol or the most recognizable part of your logo.
• Use strong contrast. Pick colors that stand apart from each other and from the browser bar. Check how it looks on both light and dark browser themes.
• Keep it consistent. Use the same colors as your logo and store theme so the favicon feels like part of your brand, not an afterthought.
• Test it at real size. Zoom out, open your store in a tab next to a dozen others and see if you can still pick it out. If you can’t, simplify further.
• Give the Apple touch icon a solid background. Transparent areas can render unpredictably on home screens.

Using Favicons with a Jumpseller Store

Favicons are really easy to create, you do not even need a designer to make it.

The icon in a browser tab is displayed at 16x16 pixels, but it’s best to upload a larger square image so your favicon stays sharp on high-resolution screens and in search results.

In order to create/generate your favicon we recommend using one of the following resources:

• Favicon Generator

• Faviomatic

Now that you have your favicon, you can upload it from Settings > Branding in your admin panel, where you’ll find the favicon option next to your logo and main color. Our guide to branding customization explains every option on that page.

Some themes also include a favicon field in their theme options. To find it, go to the Theme Options section under Themes and click on General.

Once you are there, just click on the upload favicon button highlighted in the image below (please note this option may be under a different sub-section for different themes).

After you upload it, wait a few seconds and visit your store page on a new tab in your browser to see the results. Browsers cache favicons for a long time, so if you still see the old icon, try a private window or clear your browser cache. Google also needs time to recrawl your site before the new favicon appears in search results.

For more ideas on giving your store a consistent look, read our guide to branding and positioning your company.

If you have any problems regarding this, we will be glad to be of help, just contact us.