01.01 - Favicon & App Icon Standard

Details
Written by: cayenneAdmin
Category: 01 - Branding & Visual Identity
Hits: 25

Provides the standard defining how favicons and app icons are created, named, and implemented on all CayenneDesign (CD)–managed websites.

1. Purpose

This standard defines how favicons and app icons are created, named, and implemented on all CayenneDesign (CD)–managed websites.

The goals are:

  • Consistent appearance across all CD projects and brands

  • Crisp, high-quality icons on modern high-DPI screens

  • Correct behavior on desktop browsers, iOS, Android, and PWA “Add to Home Screen” features

  • A simple, repeatable process for site setup and maintenance

2. Scope

This standard applies to:

  • cayennedesign.com

  • westvalleysmallbusiness.com

  • surprisesmallbusiness.com

  • kuwa.blog

  • satoru.blog

  • TR4 and other project sites

  • All client websites that CD builds and maintains, unless a different standard is explicitly documented

It covers:

  • File formats and sizes

  • File paths and names

  • HTML <head> tags

  • manifest.json structure and usage

3. File Locations & Naming Convention

All favicon and app icon files must be stored in:

/images/favicons/

The standard filenames are:

  • favicon.ico

    • Multi-size ICO (16×16, 32×32, optionally 48×48)

  • favicon.svg

    • Vector icon for modern browsers

  • apple-touch-icon.png

    • 180×180 PNG for iOS “Add to Home Screen”

  • android-chrome-192x192.png

    • 192×192 PNG for Android / Chrome / PWA

  • android-chrome-512x512.png

    • 512×512 PNG for Android / Chrome / PWA

  • manifest.json

    • Web app manifest referencing the above PNG icons

Important path note

  • All paths in this standard are root-relative (start with /).

  • If a Joomla site runs in a subfolder (e.g., example.com/client1/), either:

    • Place the icons at the domain root, or

    • Adjust paths in the HTML and manifest.json to match the actual location.

4. Standard HTML <head> Block

Every CD-managed website should include the following block in the <head> of the main template:

<link rel="icon" href="/images/favicons/favicon.ico" sizes="any">
<link rel="icon" href="/images/favicons/favicon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/images/favicons/android-chrome-512x512.png">

<link rel="manifest" href="/images/favicons/manifest.json">
<meta name="theme-color" content="#c62828">

Notes:

  • The theme-color value is brand-specific:

    • For CayenneDesign, #c62828 (hot pepper red).

    • Other sites should use the appropriate primary brand color.

  • The HTML structure (same tags, same types/sizes) stays the same; only the colors and file contents change per brand.

5. Manifest Template (Example: CayenneDesign)

The web app manifest is stored at:

/images/favicons/manifest.json

For CayenneDesign, the baseline template is:

{
  "name": "Cayenne Design",
  "short_name": "Cayenne",
  "description": "Cayenne Design provides domains, websites, and hosting for small businesses in Surprise, Arizona and beyond.",
  "lang": "en",
  "dir": "ltr",

  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",

  "background_color": "#ffffff",
  "theme_color": "#c62828",

  "icons": [
    {
      "src": "/images/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/images/favicons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

For other brands/sites, clone this structure and change:

  • "name" – full site/app name

  • "short_name" – shorter label for icons

  • "description" – brief summary of the site

  • "background_color" – usually #ffffff unless there is a strong reason to change

  • "theme_color" – primary brand color for that site (must match the HTML <meta name="theme-color">)

  • "icons[*].src" – keep the same filenames and paths unless the file paths differ

6. Icon Design & Source Artwork

To generate the favicon and app icon files:

  1. Source logo artwork

    • Use a square version of the logo (no long horizontal variants).

    • Avoid small text and fine detail; they will not be readable at 16×16.

  2. Canvas & export

    • Create an artboard of at least 512×512 (or 1024×1024) pixels.

    • Export a master PNG at high resolution (e.g., 1024×1024, RGBA, transparent background if appropriate).

    • From this master, generate:

      • 192×192 PNG

      • 512×512 PNG

      • 180×180 PNG for Apple touch icon

    • Generate a multi-size ICO (16/32/48) and an SVG where possible.

  3. Stylistic guidelines

    • Favor strong contrast and simple shapes.

    • Ensure the icon still reads clearly at 16×16 and 32×32.

    • Keep consistent with the site’s brand palette but do not rely on very subtle gradients for legibility.

7. Per-Site Implementation Checklist

For each new CD-managed site:

  1. Create brand-specific icons

    • Prepare the logo in square format.

    • Export or generate:

      • favicon.ico

      • favicon.svg

      • apple-touch-icon.png (180×180)

      • android-chrome-192x192.png

      • android-chrome-512x512.png

    • You can create favicons at the following URL: https://favicon.io/favicon-converter/

  2. Place files

    • Upload all icon files to:
      /images/favicons/

  3. Create or edit manifest.json

    • Copy the CayenneDesign template.

    • Update:

      • name

      • short_name

      • description

      • background_color (if needed)

      • theme_color

    • Confirm "icons" entries match the actual PNG filenames and paths.

  4. Insert HTML <head> block

    • Add the standard block to the site’s main template.

    • Update <meta name="theme-color"> to match the site’s brand color.

  5. Test

    • Desktop:

      • Confirm tab icon displays correctly in major browsers (Chrome, Firefox, Edge, Safari).

    • iOS:

      • Add the site to the Home Screen and verify the icon.

    • Android:

      • Add to Home Screen in Chrome and verify the icon and name.

    • Clear caches (browser + Joomla cache + CDN if applicable) if old icons persist.

8. Common Pitfalls (Good, Bad, and Ugly)

Good

  • Each site has its own favicon/artwork but follows the same paths and filenames.

  • theme_color and manifest.json accurately reflect each site’s branding.

  • Icons look crisp on both normal and high-DPI displays.

Bad

  • Reusing the same manifest.json across multiple brands without editing:

    • Users may see the wrong name or brand color when adding sites to the Home Screen.

  • Uploading only a low-resolution icon (e.g., only a 16×16 PNG):

    • Icons look blurry on modern devices.

Ugly

  • Running a site in a subfolder but still using root-relative paths unintentionally:

    • Icons being loaded from the wrong location or from another site on the same domain.

  • Mixing old and new assets:

    • New SVG and PNGs exist, but an outdated favicon.ico still appears because of caching or mismatched paths.

9. Future Enhancements (Optional)

These are not required by the current standard, but may be added later:

  • Safari pinned tab icon

    <link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg" color="#c62828">

    • Requires a simplified monochrome SVG.

  • Additional platform-specific icons if a specific project or client requires them.

Any such changes should be reflected in an updated version entry in the change log.

10. Change Log

  • v1.0 – 2025-12-04
    Initial favicon & app icon standard adopted for CayenneDesign and all CD-managed websites.

New Articles