Graphics and Images

1. Overview

This page lists all customisable image assets in the project. Each entry specifies the file location, required dimensions, preferred resolution, and format.

The website currently uses a minimal set of raster images — most visual elements (icons, illustrations) are inline SVGs defined directly in the Astro components. The customisable image assets are the favicon and any future OpenGraph / social sharing images.

2. Favicon

The favicon is the small icon shown in browser tabs, bookmarks, and search results.

2.1. Files

File Format Dimensions Purpose

public/favicon.ico

PNG (in .ico container)

32 x 32 px

Primary browser tab icon — used by all browsers

public/favicon.svg

SVG

Scalable

Vector favicon for modern browsers that support SVG favicons

2.2. How to Replace

  1. favicon.ico — Create a 32x32 pixel image in PNG format and save it as favicon.ico in the public/ directory. Tools like RealFaviconGenerator or favicon.io can convert logos to the correct format.

    For best results, also include sizes 16x16 and 48x48 in the ICO file. Many generators produce multi-size ICO files automatically.

  2. favicon.svg — Replace public/favicon.svg with your SVG logo. The SVG should be square (equal width and height viewBox) and look recognisable at small sizes.

2.3. Where It Is Referenced

The favicon is linked in the HTML <head> in the base layout:

src/layouts/BaseLayout.astro (line 25)
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Currently only the ICO format is referenced. To also serve the SVG favicon to modern browsers, add this line after the existing favicon link: 
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

3. OpenGraph / Social Sharing Image

OpenGraph images are displayed when the site URL is shared on social media platforms (Facebook, LinkedIn, Twitter/X) or messaging apps.

3.1. Current State

No OpenGraph image is currently configured. Adding one is recommended for professional social sharing appearance.

3.2. Recommended Specification

Property Value

File location

public/og-image.png

Format

PNG or JPEG

Dimensions

1200 x 630 px

Resolution

72 DPI (screen resolution)

Max file size

1 MB (smaller is better for load time)

Aspect ratio

1.91:1

3.3. How to Add

  1. Create an image at 1200 x 630 pixels featuring the company logo and/or tagline

  2. Save it as public/og-image.png

  3. Add the following meta tags to the <head> in src/layouts/BaseLayout.astro:

    <meta property="og:image" content="https://www.myriadevents.co.za/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://www.myriadevents.co.za/og-image.png">

4. Apple Touch Icon

Apple touch icons are used when users add the site to their iOS/iPadOS home screen.

4.1. Current State

No Apple touch icon is currently configured.

4.2. Recommended Specification

Property Value

File location

public/apple-touch-icon.png

Format

PNG

Dimensions

180 x 180 px

Resolution

72 DPI

Corners

Square (iOS applies rounding automatically)

Transparency

No — use a solid background colour

4.3. How to Add

  1. Create a 180 x 180 pixel PNG with the logo on a solid background

  2. Save it as public/apple-touch-icon.png

  3. Add this to the <head> in src/layouts/BaseLayout.astro:

    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

5. Service Page Hero Images

The ServicePage.astro component includes a placeholder area for a hero image on each service detail page.

5.1. Current State

A grey placeholder is shown in place of an actual image (defined in src/components/ServicePage.astro).

5.2. Recommended Specification

Property Value

Format

JPEG or WebP

Aspect ratio

16:9 (landscape)

Minimum dimensions

800 x 450 px

Preferred dimensions

1200 x 675 px

Resolution

72 DPI (screen)

Max file size

200 KB (use WebP for smaller size)

5.3. How to Add

Place images in public/images/services/ and update the ServicePage.astro component to accept an image prop.

6. Customisable Image Index

A summary of all customisable image slots:

Asset File Location Dimensions Format Status

Browser favicon

public/favicon.ico

32 x 32 px

ICO/PNG

Exists

SVG favicon

public/favicon.svg

Scalable

SVG

Exists

OpenGraph image

public/og-image.png

1200 x 630 px

PNG/JPEG

Not yet added

Apple touch icon

public/apple-touch-icon.png

180 x 180 px

PNG

Not yet added

Service page hero

public/images/services/*.{jpg,webp}

1200 x 675 px

JPEG/WebP

Not yet added