🖼️ Pato Perpetua Public Assets

This bucket hosts public profile assets, favicons, and PWA manifests for use in personal websites, resumes, and other platforms.

Design

All icons, profile pictures, and export variants in this repository come from the main design source created in Figma. If you ever need to review the original compositions, tweak a background, adjust borders, or export new sizes, you can open the full editable file here:

👉 Figma – Patricio Perpetua Assets

This file includes the master frames for square and circle shapes, light and dark theme variants, and all background/border combinations used across this asset library.

🖼️ Visual Preview

Here's a quick preview of the main icon variants available:

Circle Icons

Variant	Preview
bg-none (transparent)
bg-yellow
bg-mustard
bg-white
bg-none / bd-black
bg-none / bd-white
bd-black
bd-white

Square Icons

Variant	Preview
bg-none (transparent)
bg-yellow
bg-mustard
bg-none / bd-black
bg-none / bd-white
bd-black
bd-white

OG Images

Variant	Preview
dark / default
dark / square
light / default
light / square

🔗 Available Manifest Files

File	Description
`site.webmanifest`	Default icons (no border) — neutral and safe for all backgrounds.
`site-light.webmanifest`	Circled icons with no border, ideal for light-themed websites.
`site-dark.webmanifest`	Circled icons with no border, ideal for dark-themed websites.

✅ How to Use

1. Reference the manifest in your HTML

Default (no border)

<link rel="manifest" href="./favicons/site.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-yellow/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/circle/bg-yellow/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/circle/bg-yellow/favicon-16x16.png">
<link rel="shortcut icon" href="./favicons/circle/bg-yellow/favicon.ico">

Light Theme

<link rel="manifest" href="./favicons/site-light.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-mustard/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/circle/bg-mustard/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/circle/bg-mustard/favicon-16x16.png">
<link rel="shortcut icon" href="./favicons/circle/bg-mustard/favicon.ico">

Dark Theme

<link rel="manifest" href="./favicons/site-dark.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-yellow/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/circle/bg-yellow/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/circle/bg-yellow/favicon-16x16.png">
<link rel="shortcut icon" href="./favicons/circle/bg-yellow/favicon.ico">

2. Dynamic Theme Support (Optional)

You can load the correct manifest dynamically depending on user preference:

<script>
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const link = document.createElement('link');
  link.rel = 'manifest';
  link.href = prefersDark
    ? './favicons/site-dark.webmanifest'
    : './favicons/site-light.webmanifest';
  document.head.appendChild(link);
</script>

3. Download asset

Circle Assets

circle / bd-black

circle / bd-white

circle / bg-mustard

circle / bg-mustard / bd-white

circle / bg-none

circle / bg-none / bd-black

circle / bg-none / bd-white

circle / bg-white

circle / bg-yellow

circle / bg-yellow / bd-black

Square Assets

square / bd-black

square / bd-white

square / bg-mustard

square / bg-mustard / bd-white

square / bg-none

square / bg-none / bd-black

square / bg-none / bd-white

square / bg-white

square / bg-yellow

square / bg-yellow / bd-black

OG Images

og-image / dark

og-image / light

🧱 Folder Structure

/
├── site.webmanifest          ← default (no border)
├── site-light.webmanifest    ← black border icons
├── site-dark.webmanifest     ← white border icons
├── circle/
│   ├── bd-black/
│   ├── bd-white/
│   ├── bg-mustard/
│   │   ├── bd-white/
│   ├── bg-none/
│   │   ├── bd-black/
│   │   ├── bd-white/
│   ├── bg-white/
│   ├── bg-yellow/
│   │   ├── bd-black/
├── square/
│   ├── bd-black/
│   ├── bd-white/
│   ├── bg-mustard/
│   │   ├── bd-white/
│   ├── bg-none/
│   │   ├── bd-black/
│   │   ├── bd-white/
│   ├── bg-white/
│   ├── bg-yellow/
│   │   ├── bd-black/
├── og-image/
│   ├── dark/
│   │   ├── og-default.jpg
│   │   ├── og-default@2.jpg
│   │   ├── og-square.jpg
│   │   ├── og-square@2.jpg
│   ├── light/
│   │   ├── og-default.jpg
│   │   ├── og-default@2.jpg
│   │   ├── og-square.jpg
│   │   ├── og-square@2.jpg

🎨 Notes

All icons follow the PWA format with 192x192 and 512x512 sizes.
MIME type is application/manifest+json
You can use these assets freely on your own sites, resumes, or apps.