- Overview
- Build an Icon
- Contributing Guidelines
- Developing components
- Favicons
- Form Design
- How to give feedback
- How to write UX copy
- Install UI-Kit
- Migration
- PWA 📱
- Replaceable Components
- Start Designing
- Support RTL
- Themes
- Write documentation

Favicons

A favicon is a small icon that serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open

For the main favicon itself, it’s best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain.

Internal Applications: Generate Favicon

Use the generator to create favicons with an acronym of the applications name. This helps better navigating between multiple tabs.

External Applications

For external applications, use the WFP logo as the favicon. Make sure to use the Acronym for very small sizes.

Favicon Download Links

Figma source in the Figma Community.

Full sizes catalogue which can be added to the HTML Head

Legacy

Please avoid using the CDN for the favicons. It’s better to use the internal generator to create the favicons.

<link
  rel="apple-touch-icon"
  sizes="57x57"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-57-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="72x72"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-72-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="76x76"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-56-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-114-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-120-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-144-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-152-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-180-precomposed.png"
/>

<link
  rel="icon"
  type="image/png"
  sizes="260x260"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-260x260.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="96x96"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-96x96.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-16x16.png"
/>

<meta name="msapplication-TileColor" content="#007DBC" />
<meta
  name="msapplication-TileImage"
  content="https://cdn.wfp.org/guides/ui/assets/v0.0.1/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#007DBC" />

References