add favicon html content (#1418)

that-cisco-guy · yangc95 · SSwiniarski · web-flow · commit ec4137791bac · 2023-01-30T12:41:21.000-05:00
* add favicon html content

* add favicon to tag.md, update verbiage and remove header in favicon.md

* add favicon html content

* add favicon to tag.md, update verbiage and remove header in favicon.md

* fix format issues

* bold first mention of favicon as per documentation

* replaced quotes to resolve failed test issue

* remove small as per instruction

Co-authored-by: Christine Yang &lt;72277593+yangc95@users.noreply.github.com&gt;

* suggested format and verbiage change

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update content/html/concepts/favicon/favicon.md

Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;

* Update favicon.md

* prettier formatting

---------

Co-authored-by: Christine Yang &lt;72277593+yangc95@users.noreply.github.com&gt;
Co-authored-by: SSwiniarski &lt;86081858+SSwiniarski@users.noreply.github.com&gt;
Co-authored-by: Brandon Dusch &lt;brandondusch@gmail.com&gt;
diff --git a/content/html/concepts/favicon/favicon.md b/content/html/concepts/favicon/favicon.md
@@ -0,0 +1,36 @@
+---
+Title: 'Favicon'
+Description: 'A favicon is an icon that is displayed in the address bar for a browser and tab title for a website.'
+Subjects:
+  - 'Web Development'
+  - 'Web Design'
+Tags:
+  - 'Favicon'
+  - 'Documentation'
+  - 'Icons'
+CatalogContent:
+  - 'learn-html'
+  - 'paths/front-end-engineer-career-path'
+---
+
+A **favicon** (short for "favorite icon") is an icon that is displayed in the browser's address bar and tab title for a website. It is used to help users quickly identify the website and distinguish it from other tabs or bookmarks.
+
+## Syntax
+
+```pseudo
+<head>
+  <link rel="shortcut icon" type="image/x-icon" href="/path/to/favicon.ico" />
+</head>
+```
+
+Favicons originate as small images (usually 16 x 16 pixels) that are added to a [`<link>`](https://www.codecademy.com/resources/docs/html/elements/link) element, which is included in the [`<head>`](https://www.codecademy.com/resources/docs/html/elements/head) of the HTML document.
+
+The following attributes are used in the `<link>` element for favicons:
+
+- The `rel` attribute tells the browser that the linked resource is a favicon; setting to `"shortcut icon"` should accommodate most versions of the major browsers.
+- The `type` attribute specifies the format of the linked resource (i.e., `"image/x-icon"` for favicons).
+- The `href` attribute specifies the [file path](https://www.codecademy.com/resources/docs/general/file-paths) of the favicon file.
+
+> **Note:** The most common file format for favicons are files with the `.ico` extension. However, other image formats may be supported depending on the browser (e.g., `.png`, `.gif`, and `.jpeg`). An `.ico` file can be created using an image editor or online converter tool.
+
+With the favicon file and the `link` element in the HTML, the favicon should be displayed in the browser's tab title for the website.
diff --git a/documentation/tags.md b/documentation/tags.md
@@ -107,6 +107,7 @@ Events
 Exceptions
 Expo
 Express
+Favicon
 Files
 Finance
 Firebase
