Your logo in the browser tab

What a favicon is and where it shows

A favicon (from favorite icon) is the small site icon a browser shows next to the page title. It sits in the tab, in bookmarks and on the bookmarks bar, in history and in the list of open tabs on a phone, and Chrome puts it on the shortcuts of the new tab page. Google shows the favicon next to the site name in search results too, by its own rules, on desktop and on mobile.

A site without a favicon gets a grey globe or the first letter of its address. With one tab open that goes unnoticed; with ten, the page without a mark is the first to get lost.

Why your storefront needs a favicon

• Recognition. Among open tabs a customer looks for a picture, not text: your logo is found in a second, even when the title is cut to two words.
• Trust. A mark next to the name is a sign of a finished site. An empty globe looks like a page someone forgot to complete.
• Return visits. Bookmarks and history keep the page together with its mark: coming back a month later, the customer recognises you by the logo, not by the address.
• One mark everywhere. The same avatar sits on the app icon on the phone and in the link preview in a messenger, so the storefront looks the same wherever it is opened.

How it is done in Flowlyup

The storefront favicon is built from the company avatar: a round 64×64 px picture with transparent corners. Browsers do not apply styles to favicons, so the picture is made physically round - this way it matches the avatar in the dashboard and in link previews. The mark sits on every storefront page: business card, booking, shop, product pages and contacts, including on a custom domain.

1. 1Upload the company avatar in the dashboard: you can do it on the "App icon" tile in "Settings" with the "Upload company avatar" button.
2. 2Open the storefront on a computer: your logo sits in the tab next to the name.
3. 3Changed the avatar? The new mark appears after the page is reloaded: the browser keeps the previous favicon in its cache, and bookmarks refresh it the next time the page is opened.

What to keep in mind when making a favicon for your own site

• A square with size to spare. Google accepts an icon from 8×8 px but recommends larger than 48×48 so it looks crisp everywhere; formats are PNG, ICO, JPEG, GIF and others from Google's list.
• A simple silhouette. At 16 px fine details and text do not read: keep the mark, not the full name.
• One icon per domain and a stable file address: Google keeps one favicon per site and does not like the address changing.
• Check in both themes. Tabs come light and dark, and the mark must not vanish on either.
• Access for robots. The favicon file and the home page must be open for crawling, otherwise the mark will not appear in search.
• The same mark as in the app and on social networks: the customer should recognise you by one and the same image.