diff --git a/rules/optimise-favicon/bad-favicon-1.png b/rules/optimise-favicon/bad-favicon-1.png new file mode 100644 index 00000000000..7ac26fbef6c Binary files /dev/null and b/rules/optimise-favicon/bad-favicon-1.png differ diff --git a/rules/optimise-favicon/bad-favicon-2.png b/rules/optimise-favicon/bad-favicon-2.png new file mode 100644 index 00000000000..3ab537a23e8 Binary files /dev/null and b/rules/optimise-favicon/bad-favicon-2.png differ diff --git a/rules/optimise-favicon/favicon-generator.png b/rules/optimise-favicon/favicon-generator.png new file mode 100644 index 00000000000..43c5500be3e Binary files /dev/null and b/rules/optimise-favicon/favicon-generator.png differ diff --git a/rules/optimise-favicon/good-favicon-1.png b/rules/optimise-favicon/good-favicon-1.png new file mode 100644 index 00000000000..b8ef7eb8b97 Binary files /dev/null and b/rules/optimise-favicon/good-favicon-1.png differ diff --git a/rules/optimise-favicon/good-favicon-2.png b/rules/optimise-favicon/good-favicon-2.png new file mode 100644 index 00000000000..2c649e475ba Binary files /dev/null and b/rules/optimise-favicon/good-favicon-2.png differ diff --git a/rules/optimise-favicon/rule.md b/rules/optimise-favicon/rule.md new file mode 100644 index 00000000000..2ef1e79b3c4 --- /dev/null +++ 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. + + + +## 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.