The Images screen holds your logo, your favicon and the icon of your site on a phone. This article shows you how to upload them, set the colors of the app and replace an image.
Before you start
- The Images screen is in the Appearance menu. It is reserved for the administrators of the site.
- It accepts SVG, AVIF, WebP, PNG and JPEG. Prefer SVG, which stays sharp at every size.
- Each SVG is cleaned on upload. Any code it might carry is removed. An unreadable file is refused.
- Your images go live at the next publication of the site. They count toward the space of your plan.
Know the slots
The screen has three sections. Logo and Favicon have two slots, Dark mode and Light mode. Webclip & PWA has one, Icon.
| Section | Purpose | Versions produced |
|---|---|---|
| Logo | The Logo block of the header and the footer, the header of your emails and the sharing card on social networks. | An image version for emails, taken from the logo of the light mode. |
| Favicon | The small icon on the browser tab. | PNGs of 32 and 48 px. |
| Webclip & PWA | The icon of a site added to the home screen of a phone. | PNGs of 180, 192 and 512 px. |
Upload your logo
- In the administration menu, open Appearance then Images.
- In the Logo section, under Light mode, click Upload and choose your file. The logo appears in the slot.
- Under Dark mode, upload the version of your logo that is readable on a dark page.
By default, the Logo block shows the logo of the mode in which the visitor sees the page. When the visitor switches modes with the appearance selector, the logo changes with the page. Without a logo for the dark mode, the light mode logo is used in both modes. A Logo block placed on a photo can also always keep the logo of one mode: Logo describes the settings of the block.
Your emails carry an image version of the light mode logo, because email software reads SVG poorly. Without a light mode logo, they carry the name of your site.
Upload your favicon
- In the Favicon section, under Light mode, click Upload and choose your file.
- Optional: under Dark mode, upload a version that is readable on a dark tab.
The favicon must stay readable at 16 px square. Prefer a simplified version of your brand, for example its symbol without its name.
The browser shows the favicon of its own mode, light or dark, whatever the file format. Without a favicon for the dark mode, the light mode one is used in both modes.
Upload the app icon
The webclip is the icon a visitor sees when they add your site to the home screen of their phone. It must be square.
- In the Webclip & PWA section, under Icon, click Upload and choose a square image.
Without an uploaded icon, the slot reuses the favicon, the light mode one or else the dark mode one, and shows Using favicon. Your site has an app icon as soon as it has a favicon.
The icon is the same in light mode and in dark mode: phones do not show a dark icon for a site.
Set the colors of the app
Under PWA colors, two colors go with the app icon. They are white until you set them.
| Color | Purpose |
|---|---|
| Theme color | The browser bar on a phone. |
| Background color | The launch screen of a site added to the home screen. |
- Click the color swatch and choose a value.
- Click Save colors.
Replace or remove an image
To replace an image, click Upload in its slot. The new file takes the place of the old one and all its versions are rebuilt.
To remove an image, click Delete. Deleting the light mode favicon removes the app icon it was standing in for.