Replace React favicon

[fpigeonjr]

Goals

• Replace the default React favicon with a custom favicon that represents our app's branding.

Tasks

• [ ] Design or source a custom favicon for the app.
• [ ] Convert the favicon to the appropriate formats (e.g., .ico, .png).
• [ ] Update the public/index.html file to link to the new favicon.
• [ ] Test the favicon across different browsers and platforms to ensure compatibility.
• [ ] Commit the changes and push to the repository.

Additional Context

• The current favicon is the default React logo, which doesn’t reflect our brand. Updating it to a custom favicon will improve the app's professional appearance.
• The favicon should be simple and easily recognizable.
• Consider using multiple favicon sizes for different devices.
• This update is part of our ongoing effort to enhance the visual identity of our app.

Resources

• Favicon Generator - Tool to create favicon files in multiple formats.
• React Documentation - Adding Images, Fonts, and Files - Information on how to correctly add and link a favicon in a React project.

[kimschulke]

@fpigeonjr the icon you sourced below is actually the ACF icon, so I think OPRE might want to use something more specific to their office, but we can ask

If we want to use the OPRE icon, we will have to check with their brand team as I don't see any instances where they separate the 3 lines from the OPRE text

See below for social examples

---

---

[kimschulke]

OPRE logos and guidelines: https://drive.google.com/file/d/1SpKn2BN7PBQHjlqdsA_gR6uyJfGzBy4X/view?usp=sharing

[fpigeonjr]

@kimschulke maybe we could use the thee lines for favicon but that may violate the terms and conditions, don't wanna get a call from Attorney General

[fpigeonjr]

confirmed that the OPRE website uses this favicon