sg-crest
A Singapore Government Agency Website

Government officials will never ask you to transfer money or disclose bank log-in details over a phone call.

Call the 24/7 ScamShield Helpline at 1799 if you are unsure if something is a scam.

Back to UI Documentation

Favicons & Logos

Complete guide to HSA favicons and logos. Learn how to use each file for optimal display across all platforms and devices.

Quick Start

All HSA favicons and logos are located in /hsa/. These files ensure consistent branding across web browsers, mobile devices, and Progressive Web Apps.

Desktop Browsers

16×16 and 32×32 PNG files

Mobile Devices

Apple Touch & Android Chrome icons

Branding

PNG and SVG logo files

Available Files

favicon-16x16.png

favicon-16x16.png

16×16•PNG

Purpose

Small browser tab icon for standard displays

Usage

Automatically used by browsers for tabs and bookmarks. Link in HTML <head> for explicit declaration.

Platforms

ChromeFirefoxSafariEdge
/hsa/favicon-16x16.png
favicon-32x32.png

favicon-32x32.png

32×32•PNG

Purpose

Standard browser tab icon for high-resolution displays

Usage

Primary favicon for modern browsers. Link in HTML <head> with sizes="32x32" attribute.

Platforms

ChromeFirefoxSafariEdgeOpera
/hsa/favicon-32x32.png
apple-touch-icon.png

apple-touch-icon.png

180×180•PNG

Purpose

iOS home screen icon when users save website to device

Usage

Link in HTML <head> with rel="apple-touch-icon". iOS automatically adds rounded corners.

Platforms

iOS SafariiPadOSmacOS Safari
/hsa/apple-touch-icon.png
android-chrome-192x192.png

android-chrome-192x192.png

192×192•PNG

Purpose

Android home screen icon and PWA launcher

Usage

Referenced in site.webmanifest. Used when users install as Progressive Web App.

Platforms

Android ChromeAndroid FirefoxSamsung Internet
/hsa/android-chrome-192x192.png
android-chrome-512x512.png

android-chrome-512x512.png

512×512•PNG

Purpose

High-resolution Android splash screen and app icon

Usage

Referenced in site.webmanifest. Provides crisp display on high-DPI Android devices.

Platforms

Android ChromePWAAndroid Firefox
/hsa/android-chrome-512x512.png
hsa-logo.png

hsa-logo.png

Variable•PNG

Purpose

Full HSA logo for general use in documentation and UI

Usage

Use in headers, footers, documentation pages, or anywhere the full HSA branding is needed. Import with Next.js Image component for optimization.

Platforms

WebDocumentationEmailPrint
/hsa/hsa-logo.png
logo-hsa.svg

logo-hsa.svg

Scalable•SVG

Purpose

Vector HSA logo for scalable, high-quality rendering

Usage

Use for responsive designs, large displays, or print materials. Scales perfectly to any size without quality loss.

Platforms

WebPrintLarge DisplaysMarketing
/hsa/logo-hsa.svg

Implementation Guide

Next.js App Router (Recommended)

// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'HSA Self Help Tools',
  description: 'Health Sciences Authority Self Help Tools Platform',
  icons: {
    icon: [
      { url: '/hsa/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/hsa/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/hsa/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
};

HTML <head> Implementation

<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/hsa/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/hsa/favicon-32x32.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/hsa/apple-touch-icon.png">

<!-- Web App Manifest (for Android) -->
<link rel="manifest" href="/site.webmanifest">

Using HSA Logo in Components

import Image from 'next/image';

// PNG Logo
<Image
  src="/hsa/hsa-logo.png"
  alt="HSA Logo"
  width={200}
  height={60}
  priority
/>

// SVG Logo (scalable)
<Image
  src="/hsa/logo-hsa.svg"
  alt="HSA Logo"
  width={300}
  height={90}
  priority
/>

Best Practices

  • Use PNG for favicons: The 16×16 and 32×32 PNG files provide the best compatibility across browsers.
  • Use SVG for logos: The logo-hsa.svg file scales perfectly for any size and resolution.
  • Optimize with Next.js Image: Always use the Next.js Image component for automatic optimization.
  • Don't modify iOS icons: Apple automatically adds rounded corners to touch icons.

File Locations

All favicon and logo files are stored in the /hsa/ directory and are publicly accessible at /hsa/filename.

Directory Structure:

public/
└── hsa/
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    ├── hsa-logo.png
    └── logo-hsa.svg

Need help with favicon implementation? Visit our support page