✨ Add rule to favicon optimisation

rules/optimise-your-favicon/rule.md

@@ -0,0 +1,48 @@
+---
+type: rule
+archivedreason: 
+title: Do you optimise your website favicon?
+guid: df8d34e2-89c9-4a97-be6c-70f473890bdd
+uri: optimise-your-favicon
+created: 2023-07-28T12:00:00.0000000Z
+authors:
+- title: Jack Reimers
+  url: https://ssw.com.au/people/jack-reimers
+related:
+- 
+---
+
+Favicons are commonplace in web development, but did you know your favicon may not be properly optimised for all devices?
+
+<!--endintro-->
+
+## What is a Favicon?
+
+Favicons are most commonly used to display a custom icon on a browser tab, but they can also be used to alter the display of your website in other cases.
+
+Some places the favicon is used are:
+- Browser Tabs
+- Android and iPhone Icons
+- Windows and Mac Icons
+
+## How to Check Your Favicon
+
+Even if your website has a favicon, it may not be fully compliant.
+You can use [realfavicongenerator.net](https://realfavicongenerator.net/favicon_checker) to check your website.
+
+::: bad
+![Figure: Bad example - Favicon does not display properly on all devices](bad-favicon.png)
+:::
+
+::: good
+![Figure: Bad example - Favicon displays properly on all devices](good-favicon.png)
+:::
+
+## How to Update Your Favicon
+
+[realfavicongenerator.net](https://realfavicongenerator.net) also has a favicon generator that you can use to generate a set of icons and meta tags from a single image.
+
+The site will guide you through all the settings and display a preview of how your favicon will look on each device.
+![Figure: Choosing our favicon settings](favicon-generator.png)
+
+Once you're happy with how it looks, click `Generate your Favicons and HTML code` and you will be given instructions on how to install your new favicon with a number of popular technologies, such as HTML5, ASP.NET Core and NodeJS.