Add App Favicons

Vite generates a simple favicon for our app and places it in public/vite.svg of our app. However, getting the favicon to work on all browsers and mobile platforms requires a little more work. There are quite a few different requirements and dimensions. And this gives us a good opportunity to learn how to include files in the public/ directory of our app.

For our example, we are going to start with a simple image and generate the various versions from it.

Right-click to download the following image. Or head over to this link to download it — https://guide.sst.dev/assets/scratch-icon.png

To ensure that our icon works for most of our targeted platforms we’ll use a service called the Favicon Generator.

Click Select your Favicon picture to upload our icon.

Realfavicongenerator.net screenshot

Once you upload your icon, it’ll show you a preview of your icon on various platforms. Scroll down the page and hit the Generate your Favicons and HTML code button.

Realfavicongenerator.net screenshot

This should generate your favicon package and the accompanying code.

Change indicator Click Favicon package to download the generated favicons. And copy all the files over to your public/ directory.

Realfavicongenerator.net completed screenshot

Let’s remove the old icons files.

Change indicator Then replace the contents of public/site.webmanifest with the following:

{
  "short_name": "Scratch",
  "name": "Scratch Note Taking App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Change indicator Add this to the <head> in your public/index.html.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="A simple note taking app" />

Change indicator And remove the following line that references the original favicon.

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

Finally head over to your browser and add /favicon-32x32.png to the base URL path to ensure that the files were added correctly.

Next we are going to look into setting up custom fonts in our app.

SST Guide