diff --git a/content/html/concepts/favicon/favicon.md b/content/html/concepts/favicon/favicon.md new file mode 100644 index 00000000000..dd92386b345 --- /dev/null +++ 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 index 7969d73ff15..e544eeb0960 100644 --- a/documentation/tags.md +++ b/documentation/tags.md @@ -107,6 +107,7 @@ Events Exceptions Expo Express +Favicon Files Finance Firebase