Favicon

Shipped is already configured with a default favicon (the Shipped icon, but green).

To replace it with your icon I suggest using the Favicon Generator.

upload your image
download the zip package with all the icons
unzip the file and place all the files into the folder src/app

All the icons will be updated.

For reference, the favicons are included in

src/app/layout.tsx

<head>
  <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" />
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
  <meta name="msapplication-TileColor" content="#00aba9" />
  <meta name="theme-color" content="#ffffff" />
</head>

PreviousChangelog widget NextGoogle Fonts

Last updated 1 year ago

Was this helpful?

Favicon

Shipped is already configured with a default favicon (the Shipped icon, but green).

To replace it with your icon I suggest using the Favicon Generator.

upload your image
download the zip package with all the icons
unzip the file and place all the files into the folder src/app

All the icons will be updated.

For reference, the favicons are included in

src/app/layout.tsx

<head>
  <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" />
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
  <meta name="msapplication-TileColor" content="#00aba9" />
  <meta name="theme-color" content="#ffffff" />
</head>

PreviousChangelog widget NextGoogle Fonts

Last updated 1 year ago

Was this helpful?