add vector favicons (for higher-res PWA + apple-touch-icon homescreen icons)

[cvan]

I couldn't find the source for the favicon.ico in this repo nor in MozillaReality/mr-social-assets. I assume it was made in Sketch, yeah?

I can make a PR for them, if I can get the Sketch/vector source files.

┆Issue is synchronized with this Jira Task

[cvan]

could probably extract it from https://github.com/mozilla/hubs/blob/master/src/assets/images/logo.svg, but I'll wait to hear back on this

[gfodor]

Yeah the favicon is in our figma https://www.figma.com/file/H3kcapreQbqtUmPWSr2q9vqq/Hubs-logo?node-id=11%3A2

it's quacktastic 🦆

[gfodor]

lmk if you can't access that

[cvan]

thanks! here's the SVG (ran it through SVGO):

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
  <g fill="none" clip-path="url(#clip0)">
    <path fill="url(#paint0_linear)" d="M84.283 29.72c-2.93-2.23-2.416 10.129-18.585 12.027-7.417.871-13.706-.48-19.024-2.273 5.819-3.846 9.663-10.452 9.663-17.967C56.337 9.63 46.747 0 34.914 0 24.586 0 15.97 7.335 13.944 17.097 6.24 15.47 0 14.023 0 20.658c0 6.168 9.15 12.311 18.881 16.017C8.751 41.216 1.687 51.412 1.687 63.269c0 16.079 13.073 27.443 29.003 29.115 22.62 2.373 49.453-1.515 59.586-21.942 7.248-14.61 3.992-33.125-5.993-40.722z" transform="translate(3.801 9)"/>
    <g mask="url(#path1_ins)" transform="translate(3.801 9)">
      <path stroke="#000" stroke-width="4" d="M84.283 29.72c-2.93-2.23-2.416 10.129-18.585 12.027-7.417.871-13.706-.48-19.024-2.273 5.819-3.846 9.663-10.452 9.663-17.967C56.337 9.63 46.747 0 34.914 0 24.586 0 15.97 7.335 13.944 17.097 6.24 15.47 0 14.023 0 20.658c0 6.168 9.15 12.311 18.881 16.017C8.751 41.216 1.687 51.412 1.687 63.269c0 16.079 13.073 27.443 29.003 29.115 22.62 2.373 49.453-1.515 59.586-21.942 7.248-14.61 3.992-33.125-5.993-40.722z"/>
    </g>
    <ellipse cx="5.744" cy="5.812" fill="#000" rx="5.744" ry="5.812" transform="rotate(2.906 -430.508 495.909) skewX(.111)"/>
    <mask id="a" width="32" height="73" x="-8" y="18" maskUnits="userSpaceOnUse">
      <path fill="#C4C4C4" d="M8.583 25.056a32.498 32.498 0 0 0-2.84 8.027l7.897 37.541c.678 1.291.874 1.696.203.966l-.203-.966c-2.476-4.714-11.377-21.259-7.897-37.54L0 5.78 20.711 0c10.838 8.416 10.921 12.348 9.953 26.822-12.562 3.273-17.597-10.543-22.081-1.766z" transform="translate(-8 18.849)"/>
    </mask>
    <g clip-rule="evenodd" mask="url(#a)">
      <path fill="#FF8A00" fill-rule="evenodd" d="M87.48 39.515a.918.918 0 0 0-.042-.03 1.157 1.157 0 0 0-.061.059 3.349 3.349 0 0 0-.34.423c-.222.313-.455.697-.743 1.171l-.261.429a29.64 29.64 0 0 1-1.473 2.214c-2.401 3.24-6.551 6.974-14.944 7.96-7.611.893-14.056-.498-19.46-2.32l-1.938-.654 1.706-1.128c5.55-3.668 9.214-9.967 9.214-17.132C59.138 19.178 49.992 10 38.715 10c-9.842 0-18.058 6.99-19.99 16.3l-.205.982-.981-.207-.436-.092c-1.772-.374-3.428-.724-4.94-.96-1.643-.257-3.043-.367-4.174-.249-1.126.118-1.874.45-2.354.974-.478.524-.834 1.398-.834 2.91 0 2.6 1.96 5.419 5.412 8.148 3.4 2.688 8.022 5.106 12.826 6.935l2.256.86-2.203.987c-9.783 4.385-16.604 14.23-16.604 25.68 0 15.444 12.554 26.488 28.108 28.12l-.104.995.104-.995c11.227 1.178 23.448.795 34.085-2.384 10.626-3.176 19.593-9.115 24.5-19.008l.896.445-.895-.445c3.525-7.106 4.5-15.176 3.373-22.392-1.128-7.23-4.346-13.49-9.076-17.089z"/>
      <path stroke="#000" stroke-miterlimit="8" stroke-width="2" d="M87.48 39.515a.918.918 0 0 0-.042-.03 1.157 1.157 0 0 0-.061.059 3.349 3.349 0 0 0-.34.423c-.222.313-.455.697-.743 1.171l-.261.429a29.64 29.64 0 0 1-1.473 2.214c-2.401 3.24-6.551 6.974-14.944 7.96-7.611.893-14.056-.498-19.46-2.32l-1.938-.654 1.706-1.128c5.55-3.668 9.214-9.967 9.214-17.132C59.138 19.178 49.992 10 38.715 10c-9.842 0-18.058 6.99-19.99 16.3l-.205.982-.981-.207-.436-.092c-1.772-.374-3.428-.724-4.94-.96-1.643-.257-3.043-.367-4.174-.249-1.126.118-1.874.45-2.354.974-.478.524-.834 1.398-.834 2.91 0 2.6 1.96 5.419 5.412 8.148 3.4 2.688 8.022 5.106 12.826 6.935l2.256.86-2.203.987c-9.783 4.385-16.604 14.23-16.604 25.68 0 15.444 12.554 26.488 28.108 28.12l-.104.995.104-.995c11.227 1.178 23.448.795 34.085-2.384 10.626-3.176 19.593-9.115 24.5-19.008l.896.445-.895-.445c3.525-7.106 4.5-15.176 3.373-22.392-1.128-7.23-4.346-13.49-9.076-17.089z"/>
    </g>
    <ellipse cx="1.629" cy="1.645" fill="#fff" rx="1.629" ry="1.645" transform="translate(30.273 25.452)"/>
  </g>
  <defs>
    <linearGradient id="paint0_linear" x2="1" gradientTransform="matrix(0 106.441 -94.1985 0 94.198 0)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFC000"/>
      <stop offset="1" stop-color="#FFD600"/>
    </linearGradient>
    <clipPath id="clip0">
      <path fill="#fff" d="M0 0h64v64H0z"/>
    </clipPath>
    <mask id="path1_ins" fill="#fff">
      <path d="M84.283 29.72c-2.93-2.23-2.416 10.129-18.585 12.027-7.417.871-13.706-.48-19.024-2.273 5.819-3.846 9.663-10.452 9.663-17.967C56.337 9.63 46.747 0 34.914 0 24.586 0 15.97 7.335 13.944 17.097 6.24 15.47 0 14.023 0 20.658c0 6.168 9.15 12.311 18.881 16.017C8.751 41.216 1.687 51.412 1.687 63.269c0 16.079 13.073 27.443 29.003 29.115 22.62 2.373 49.453-1.515 59.586-21.942 7.248-14.61 3.992-33.125-5.993-40.722z"/>
    </mask>
  </defs>
</svg>

I'm now working on a PR to add the variously sized icons

[joshmarinacci]

What ever happened to this?

[cvan]

@joshmarinacci 👋 hiya, the manifest source lives here:

https://github.com/mozilla/reticulum/blob/4aee4e42490e4d9deb3807c82a9a7b5a8eb68ebd/lib/ret_web/templates/page/manifest.webmanifest.eex