✨ Add rule to favicon optimisation (#6183)

* Create rule.md * Upload images * Update rule.md * Add favicon generator image * Update rule.md
SSWConsulting · Aug 7, 2023 · 837e98b · 837e98b
1 parent ea65cb5
commit 837e98b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 0 deletions.
diff --git a/rules/optimise-favicon/bad-favicon-1.png b/rules/optimise-favicon/bad-favicon-1.png
diff --git a/rules/optimise-favicon/bad-favicon-2.png b/rules/optimise-favicon/bad-favicon-2.png
diff --git a/rules/optimise-favicon/favicon-generator.png b/rules/optimise-favicon/favicon-generator.png
diff --git a/rules/optimise-favicon/good-favicon-1.png b/rules/optimise-favicon/good-favicon-1.png
diff --git a/rules/optimise-favicon/good-favicon-2.png b/rules/optimise-favicon/good-favicon-2.png
diff --git a/rules/optimise-favicon/rule.md b/rules/optimise-favicon/rule.md
@@ -0,0 +1,45 @@
+---
+type: rule
+archivedreason: 
+title: Do you optimise your website favicon?
+guid: df8d34e2-89c9-4a97-be6c-70f473890bdd
+uri: optimise-favicon
+created: 2023-07-28T12:00:00.0000000Z
+authors:
+- title: Jack Reimers
+  url: https://ssw.com.au/people/jack-reimers
+related:
+- 
+---
+
+Favicons are more than just a single icon, and they require proper optimisation to display correctly on 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 such as Android, iPhone, 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-1.png)
+![Figure: Bad example - Favicon does not display properly on all devices](bad-favicon-2.png)
+:::
+
+::: good
+![Figure: Bad example - Favicon displays properly on all devices](good-favicon-1.png)
+![Figure: Bad example - Favicon displays properly on all devices](good-favicon-2.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.