Clarify favicon addition instructions in documentation

files/en-us/learn_web_development/core/structuring_content/creating_links/index.md

@@ -217,45 +217,75 @@ Your finished HTML should look like this:
 
 ## A quick primer on URLs and paths
 
-To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.
+To fully understand link targets, you need to understand URLs and file paths.
 
-A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla's English homepage is located at `https://www.mozilla.org/en-US/`.
+A URL, or Uniform Resource Locator, is a string of text that defines where something is located on the Web. For example, Mozilla's English homepage is located at `https://www.mozilla.org/en-US/`.
 
-URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the `creating-hyperlinks` directory structure shown below:
+URLs use paths to find files. Paths specify where the file you're interested in is located in the website's filesystem. Let's look at an example of a website directory structure:
 
 ![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](simple-directory.png)
 
 The **root** of this directory structure is called `creating-hyperlinks`. When working locally with a website, you'll have one directory that contains the entire site. Inside the **root**, we have an `index.html` file and a `contacts.html`. In a real website, `index.html` would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).
 
-There are also two directories inside our root — `pdfs` and `projects`. These each have a single file inside them — a PDF (`project-brief.pdf`) and an `index.html` file, respectively. Note that you can have two `index.html` files in one project, as long as they're in different filesystem locations. The second `index.html` would perhaps be the main landing page for project-related information.
+There are also two directories inside our root — `pdfs` and `projects`. These each have a single file inside them — a PDF (`project-brief.pdf`) and an `index.html` file, respectively. Note that you can have multiple `index.html` files in one project, as long as they're in different filesystem locations. The second `index.html` would perhaps be the main landing page for project-related information.
 
-Let's look at some examples of links between some different files in this directory structure to demonstrate different link types:
+Let's look at some examples of links between some different files in this directory structure to demonstrate different path types.
 
-- **Same directory**: If you wanted to include a hyperlink inside `index.html` (the top level `index.html`) pointing to `contacts.html`, you would specify the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is `contacts.html`:
+### Same directory
 
-  ```html
-  <p>
-    Want to contact a specific staff member? Find details on our
-    <a href="contacts.html">contacts page</a>.
-  </p>
-  ```
+If you want to include a hyperlink inside the top level `index.html` pointing to `contacts.html`, you can specify the path as just the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is `contacts.html`:
 
-- **Moving down into subdirectories**: If you wanted to include a hyperlink inside `index.html` (the top level `index.html`) pointing to `projects/index.html`, you would need to go down into the `projects` directory before indicating the file you want to link to.
-  This is done by specifying the directory's name, then a forward slash, then the name of the file. The URL you would use is `projects/index.html`:
+```html
+<p>
+  Want to contact a specific staff member? Find details on our
+  <a href="contacts.html">contacts page</a>.
+</p>
+```
+
+You can also start a path to a file inside the same directory using a single dot followed by a slash: `./`. The following example is equivalent to the previous one, but some people like to include the `./` anyway because they feel it provides more clarity:
+
+```html
+<p>
+  Want to contact a specific staff member? Find details on our
+  <a href="./contacts.html">contacts page</a>.
+</p>
+```
 
-  ```html
-  <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
-  ```
+> [!NOTE]
+> There are some instances in which including `./` in your path will make a difference, for example when specifying paths for [JavaScript module](/en-US/docs/Web/JavaScript/Guide/Modules) imports, but you don't need to worry about this for static HTML and CSS links.
 
-- **Moving back up into parent directories**: If you wanted to include a hyperlink inside `projects/index.html` pointing to `pdfs/project-brief.pdf`, you'd have to go up a directory level, then back down into the `pdfs` directory.
-  To go up a directory, use two dots — `..` — so the URL you would use is `../pdfs/project-brief.pdf`:
+### Moving down into subdirectories
 
-  ```html
-  <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
-  ```
+If you want to include a hyperlink inside the top level `index.html` pointing to `projects/index.html`, you need to go down into the `projects` directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. The URL you can use is `projects/index.html`:
+
+```html
+<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
+```
+
+### Moving back up into parent directories
+
+If you want to include a hyperlink inside `projects/index.html` pointing to `pdfs/project-brief.pdf`, you have to go up a directory level, then back down into the `pdfs` directory. To go up a directory, you use two dots — `..` — so the URL is `../pdfs/project-brief.pdf`:
+
+```html
+<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
+```
 
 > [!NOTE]
-> You can combine multiple instances of these features into complex URLs, if needed, for example: `../../../complex/path/to/my/file.html`.
+> You can combine multiple instances of these features into complex paths, if needed, for example: `../../../complex/path/to/my/file.html`.
+
+### Linking relative to the root directory
+
+The above URLs work, but bear in mind that if you move either the linking file or the linked file to a different location, you will break the link.
+
+If you want to create a link to a specific location that won't break if you move the linking file, you can do so by putting a single slash at the start of the path — this indicates that the path starts in the root directory of the site. For example, the previous link inside `projects/index.html` could be rewritten as:
+
+```html
+<p>A link to my <a href="/pdfs/project-brief.pdf">project brief</a>.</p>
+```
+
+Now the path will always start from the root directory (`creating-hyperlinks`), travel to the `pdfs` directory, and find the `project-brief.pdf` file. This will still work if you move the linking file to a different location, for example `a/b/c/d/e/index.html`.
+
+If you move the linked `project-brief.pdf` file to a different location, you will still break the link.
 
 ### Document fragments
 
@@ -264,42 +294,88 @@ To do this you first have to assign an [`id`](/en-US/docs/Web/HTML/Reference/Glo
 It normally makes sense to link to a specific heading, so this would look something like the following:
 
 ```html
-<h2 id="Mailing_address">Mailing address</h2>
+<h2 id="mailing_address">Mailing address</h2>
 ```
 
-Then to link to that specific `id`, you'd include it at the end of the URL, preceded by a hash/pound symbol (`#`), for example:
+To link to that specific `id`, you include it at the end of the path, preceded by a hash/pound symbol (`#`), for example:
 
 ```html
 <p>
   Want to write us a letter? Use our
-  <a href="contacts.html#Mailing_address">mailing address</a>.
+  <a href="contacts.html#mailing_address">mailing address</a>.
 </p>
 ```
 
 You can even use the document fragment reference on its own to link to _another part of the current document_:
 
 ```html
 <p>
-  The <a href="#Mailing_address">company mailing address</a> can be found at the
+  The <a href="mailing_address">company mailing address</a> can be found at the
   bottom of this page.
 </p>
 ```
 
-### Absolute versus relative URLs
+### Absolute versus relative paths
 
-Two terms you'll come across on the web are **absolute URL** and **relative URL:**
+Two terms you'll come across on the web are **absolute path** and **relative path**.
 
-**Absolute URL**: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}.
-For example, if an `index.html` page is uploaded to a directory called `projects` that sits inside the **root** of a web server, and the website's domain is `https://www.example.com`, the page would be available at `https://www.example.com/projects/index.html` (or even just `https://www.example.com/projects/`, as most web servers just look for a landing page such as `index.html` to load if it isn't specified in the URL.)
+- Absolute path: Points to a location defined by its absolute location in your site (or elsewhere on the web). For example, you can create an absolute link that always points to the same location relative to the site root directory using the single slash at the start of the path, as we saw earlier: `/pdfs/project-brief.pdf`.
+- Relative path: Points to a location that is _relative_ to the file you are linking from. In our earlier example, we used `projects/index.html` to create a relative link between the current file and a file called `index.html` that is inside a `projects` subdirectory. If you were to move the current file to a different location, the path would still be relative to that file, but it would point to a different absolute location.
 
-An absolute URL will always point to the same location, no matter where it's used.
+### How do paths translate into URLs?
 
-**Relative URL**: Points to a location that is _relative_ to the file you are linking from, more like what we looked at in the previous section.
-For example, if we wanted to link from our example file at `https://www.example.com/projects/index.html` to a PDF file in the same directory, the URL would just be the filename — `project-brief.pdf` — no extra information needed. If the PDF was available in a subdirectory inside `projects` called `pdfs`, the relative link would be `pdfs/project-brief.pdf` (the equivalent absolute URL would be `https://www.example.com/projects/pdfs/project-brief.pdf`.)
+When talking about static websites, the URL a file is available at is a combination of the location it is uploaded to on a web server, and the {{glossary("domain name")}} of the website.
+
+> [!NOTE]
+> With dynamic websites, for example, built with web frameworks, things are often not that simple as they generate files and URLs dynamically. Don't worry about this for now.
+
+For example, if we upload our sample site directory structure to the root of a web server (not in some kind of subfolder) and the website {{glossary("domain name")}} is set to `example.com`, our `pdfs/project-brief.pdf` file would be available at `https://www.example.com/pdfs/project-brief.pdf`.
+
+If we wanted to create a working link to this file:
+
+- `/pdfs/project-brief.pdf` would always create a link to `https://www.example.com/pdfs/project-brief.pdf`, as it is an absolute path that always points to the same place on the site.
+- `projects/index.html` would create a link to `https://www.example.com/projects/index.html`, but only when included in a file inside the root directory, such as the top-level `index.html` file, or `contacts.html`. If you included it, for example, inside an HTML file at `pdfs/index.html`, it would link to `https://www.example.com/pdfs/projects/index.html`, which doesn't exist, so you'd end up with a broken link.
+
+#### The default `index.html` page
+
+When referencing an `index.html` file, you generally don't need to include the `index.html` in the URL/path, because web servers look for a default landing page called `index.html` when a filename isn't specified.
+
+Looking again at our `projects/index.html` path example, we could just write the path as `projects`, and this would create a link to `https://www.example.com/projects/index.html`. When navigating to the page, we could write the URL as `https://www.example.com/projects/` and it would still get us to the right place.
+
+#### Specifying a URL as the path
+
+You can specify a full URL as your path, which will always point to the same location on the web, no matter where it's used. For example:
+
+```html
+<a href="https://www.example.com/projects/">projects</a>
+```
+
+This link will always link to `https://www.example.com/projects/`, no matter where it appears in a site. In this context, the URL is a type of absolute path.
+
+#### Internal versus external links
+
+When a link points to a resource on _your_ site, it is referred to as an **internal link**. When a link points to a resource on a _different_ site, it is called an **external link**.
+
+When specifying an external link, you always have to include the full URL as the path, for example:
+
+```html
+<a href="https://www.some-other-site.com">projects</a>
+```
+
+You can't reference a location on a different site with a path like `/pdfs/project-brief.pdf` or `projects/index.html`, as they are both relative to a location on your own site, and the browser needs the website's domain name to be able to find it.
+
+When specifying an internal link, you can use a relative or absolute path, or a full URL. In our example, these links are equivalent:
+
+```html
+<a href="https://www.example.com/projects/">projects</a>
+
+<a href="projects">projects</a>
+```
 
-A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our `index.html` file out of the `projects` directory and into the **root** of the website (the top level, not in any directories), the `pdfs/project-brief.pdf` relative URL link inside it would now point to a file located at `https://www.example.com/pdfs/project-brief.pdf`, not a file located at `https://www.example.com/projects/pdfs/project-brief.pdf`.
+However, there are a couple of good reasons why you shouldn't use full URLs for internal links:
 
-Of course, the location of the `project-brief.pdf` file and `pdfs` folder won't suddenly change because you moved the `index.html` file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!
+- Efficiency: It takes more resources to look up a full URL. If you specify `https://www.example.com/projects/`, when a user clicks on the link the browser will first look up the server location, then look for the linked page. If you specify `projects`, the browser will immediately look for the linked page on the same server it is already on.
+- Portability: As we've said before, if you specify `https://www.example.com/projects/`, it will always link to `https://www.example.com/projects/`. If you then move your website to a different domain, for example `another-example.com`, your full URL links will all need to be changed. If you specify paths such as `projects`, they will still work, as they are still relative to the directory structure.
 
 ## Link best practices
 

files/en-us/learn_web_development/core/structuring_content/webpage_metadata/index.md

@@ -201,18 +201,23 @@ The humble favicon has been around for many years. It is the first icon of this
 
 A favicon can be added to your page by:
 
-1. Saving it in the same directory as the site's index page, saved in `.ico` format (most also support favicons in more common formats like `.gif` or `.png`)
-2. Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it:
+1. Saving it in a supported format such as `.ico`, `.gif`, or `.png` somewhere inside your website folder structure.
+2. Adding a {{htmlelement("link")}} element into your HTML's {{HTMLElement("head")}} block, which references the path to the favicon file:
 
    ```html
-   <link rel="icon" href="favicon.ico" type="image/x-icon" />
+   <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    ```
 
+> [!NOTE]
+> In this example, the path to the favicon file starts with `/`, which means "look for the file in the top-level (or _root_) directory of your site". This may be in a different place in the source code, depending on what system you are using to create your site: different web frameworks for example put the site content root in different places. Bear in mind also that most browsers these days automatically use a `favicon.ico` file found at the site root as a favicon, so many sites don't even bother to include the `<link>` element. It is still useful to know about in case you want to locate your favicon file somewhere else.
+>
+> Don't worry too much about the intricacies of file paths for now; you'll learn more about them later on (check out [A quick primer on URLs and paths](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links#a_quick_primer_on_urls_and_paths) if you are curious).
+
 Here is an example of a favicon in a bookmarks panel:
 
 ![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](bookmark-favicon.png)
 
-You may also need different icons for different contexts. For example, you'll find this in the source code of the MDN Web Docs homepage:
+You may also want to include different icons for different contexts. For example:
 
 ```html
 <link rel="icon" href="/favicon-48x48.[some hex hash].png" />
@@ -243,13 +248,10 @@ This is a way to make the site show an icon when saved to an Apple device's home
 <link rel="icon" href="/favicon.ico" />
 ```
 
-The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.
+The comments explain what each icon is used for — these elements cover things like providing a high-resolution icon to use when the website is saved to an iPad's home screen.
 
 Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code. If you do want to learn more about all these values and how to choose them, read the {{HTMLElement("link")}} element's reference page.
 
-> [!NOTE]
-> If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's [`img-src` directive](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/img-src) is not preventing access to it.
-
 ## Applying CSS and JavaScript to HTML
 
 Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.