# Favicons

> Favicons make Kesko’s digital services identifiable in browser windows, tabs and bookmarks, and give them a recognizable icon on the home screen and in installed web apps.

A shared favicon makes Kesko’s services easier to recognize and lends them credibility. The favicon kit on this page contains it in the sizes browsers and operating systems ask for, with the markup to reference them. Use it only in services provided by Kesko.

The favicon shows the K logo on a transparent background, so it works on light and dark browser themes alike. The home screen icons sit on white, as [Included assets](#included-assets) explains.

---

## Usage

Download the [favicon kit](/assets/favicon/kesko-favicon-kit.zip) and copy the image files to the root of your site. Keep `favicon.ico` at the root even if you move the others: many tools request `/favicon.ico` without reading the page.

Add these four lines inside `<head>`:

```html
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
```

The `sizes` attributes matter. Browsers that understand SVG icons pick the candidate with the largest declared size, and `any` counts as the largest, so declaring the ICO as `48x48` makes them prefer the SVG. Browsers without SVG icon support ignore the SVG line and fall back to the ICO.

The declared size does not limit the ICO itself. A browser that uses it reads all three layers inside the file and picks the one that fits.

> Note: Keep the SVG after the ICO. A browser that ranks icons by source order rather than the sizes attribute takes the last one declared.

---

## Web app manifest

A service that can be installed to the home screen needs a web app manifest, the file the `rel="manifest"` link above points to. A plain website can skip this section. Add the three PNG files to the `icons` array of the manifest:

```json
{
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
```

Keep the maskable icon as its own entry. `"purpose": "maskable"` lets the Android home screen crop the icon into its own shape, often a circle. The maskable icon keeps the K logo small on a white background so it survives the crop. A transparent icon marked maskable would lose part of the logo.

---

## Included assets

The kit has one file for each place the favicon shows up: browser tabs, home screens and installed web apps. The ICO, the SVG and the two plain manifest PNGs have a transparent background, so the icon sits on whatever color the browser tab or bookmark bar has, in light and dark themes alike.

The Apple touch icon and the maskable icon sit on white instead, because iOS paints transparency black and Android crops maskable icons to its own shapes.

| File                        | Size                | Used by                                  |
| --------------------------- | ------------------- | ---------------------------------------- |
| `favicon.ico`               | 16×16, 32×32, 48×48 | Legacy browsers and tools                |
| `favicon.svg`               | any                 | Modern browsers                          |
| `apple-touch-icon.png`      | 180×180             | iOS and iPadOS home screen               |
| `favicon-192x192.png`       | 192×192             | Web app manifest                         |
| `favicon-512x512.png`       | 512×512             | Web app manifest                         |
| `maskable-icon-512x512.png` | 512×512             | Web app manifest and Android home screen |

---

## Downloads

- [Favicon kit](/assets/favicon/kesko-favicon-kit.zip) — Includes the favicon image files and examples.