Pride Icons

Icon versions of Daniel Quasar’s Progress Pride flag.

Usage

Copy the files from dist/static/ to your public directory (use degit --force with caution):

# If static files live in /static (e.g. SvelteKit):
npx degit caminad/pride-icons/dist --force

# ...or if static files live in /public (e.g. Next.js):
npx degit caminad/pride-icons/dist/static public --force

# ...or if static files live in / (e.g. Eleventy):
npx degit caminad/pride-icons/dist/static --force

Link to the SVG favicon:

<html>
  <head>
    ...
    <link
      rel="apple-touch-icon"
      href="/apple-touch-icon.png"
      type="image/png"
      sizes="192x192"
    />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  </head>
  ...
</html>

The sizes="any" attribute is a bit of a hack to prevent Chrome, Edge and Firefox fetching /favicon.ico, even though they support SVG icons. Safari will fetch both and use /favicon.ico as it does not (yet) support SVG icons. All browsers may use /apple-touch-icon.png when they require a flat square icon.

Note Safari aggressively caches favicons, ignoring caching headers and markup changes. To get new icons to show up during testing:

Quit Safari.

Finder > Go > Go to Folder... and enter ~/Library/Safari/Favicon Cache.

Delete the contents of Favicon Cache.

Re-open Safari, and make sure that the Developer Tools Network Tab is open before loading the site for the first time to see the icon request.

Files

Generated from src/pride.svg by scripts/build.js.

`dist/static/apple-touch-icon.png`

`dist/static/favicon.ico`

`dist/static/favicon.svg`

License

MIT

Derived from the Progress Pride flag design (CC-BY-SA 4.0 Daniel Quasar)