This package exports functions and a React component that renders a set of favicons of different sizes associated with the Volvo Cars brand. The component renders link tags with rel, sizes and href attributes to notify browsers of the type, size and location of the favicon in the shared assets CDN.

Installation

Usage

import { renderFavIcons } from '@volvo-cars/favicons';
import { FavIcons } from '@volvo-cars/favicons/react';

renderFavIcons();
//or for React
<FavIcons />;

💡 This package includes Typescript definitions

This package is meant to be rendered server-side in the head tag, along with other link elements. By only server-side rendering, none of the code will be included in the client-side bundle.

Next.js Example

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { FavIcons } from '@volvo-cars/favicons/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <FavIcons />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Custom http server Example

import express from 'express';
import { renderFavIcons } from '@volvo-cars/favicons';

const app = express();
const favIcons = renderFavIcons();
app.get('/', (req, res) => {
  const html = `
<!DOCTYPE html>
  <html>
    <head>
      <title>Title of the document</title>
      ${favIcons}
    </head>
    <body>
      ...
    </body>
  </html>`;
  res.send(html);
});

const port = 3000;
app.listen(port, () => {
  console.info(`Listening on port ${port}`);
});

The function and React component render the following HTML:

<link rel=apple-touch-icon
href=https://www.volvocars.com/static/shared/images/favicons/apple-touch-icon-precomposed-180x180.v2.png
sizes=180x180 /> <link rel=icon
href=https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.png
sizes=16x16 /> <link rel=icon
href=https://www.volvocars.com/static/shared/images/favicons/favicon-32x32.v2.png
sizes=32x32 /> <link rel=icon
href=https://www.volvocars.com/static/shared/images/favicons/favicon-192x192.v2.png
sizes=192x192 /> <link rel=icon
href=https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.svg
type=image/svg+xml />

`renderFavIcons`

renderFavIcons();

returns a string of link HTML elements.

`getFavIcons`

getFavIcons();

return an array of objects that has information about the sizes, rel, type and href to the favicon in the shared assets CDN,

Get Icon data without `link` tags

It's also possible to get the available favicon sizes and links this package renders through the getFavIcons function exported from @volvo-cars/favicons.

Example

import { getFavIcons } from '@volvo-cars/favicons';

getFavIcons();
/*
  [{
    "href": "https://www.volvocars.com/static/shared/images/favicons/apple-touch-icon-precomposed-180x180.v2.png",
    "rel": "apple-touch-icon",
    "sizes": "180x180",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.png",
    "rel": "icon",
    "sizes": "16x16",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-32x32.v2.png",
    "rel": "icon",
    "sizes": "32x32",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-192x192.v2.png",
    "rel": "icon",
    "sizes": "192x192",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.svg",
    "rel": "icon",
    "type": "image/svg+xml",
  }]
*/

FAQs

What is @volvo-cars/favicons?

Is @volvo-cars/favicons popular?

Is @volvo-cars/favicons well maintained?

Package last updated on 03 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@volvo-cars/favicons

FavIcons

Installation

Usage

Next.js Example

Custom http server Example

renderFavIcons

getFavIcons

Get Icon data without link tags

Example

Related posts

Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware

Ruby Core Team Assumes Stewardship of RubyGems and Bundler, Former Maintainers Offer to Transfer All Rights to Matz

`renderFavIcons`

`getFavIcons`

Get Icon data without `link` tags