Skip to content

Clarify favicon addition instructions in documentation #41838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+142 −54
Open

Clarify favicon addition instructions in documentation #41838

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed23e00
Clarify favicon addition instructions in documentation
chrisdavidmills Nov 7, 2025
f0e627e
Merge branch 'main' into chrisdavidmills-patch-1
chrisdavidmills Nov 13, 2025
c5ef652
further updates
chrisdavidmills Nov 13, 2025
ad82b72
Rewrite
Josh-Cena Nov 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .../en-us/learn_web_development/core/structuring_content/webpage_metadata/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@ 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 directory (in this example, it would be saved in the same directory as the HTML file).
Copy link
Member

@Josh-Cena Josh-Cena Nov 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the main confusion is that we are mixing "directory" and "URL". If you use any framework the "directory" of the site (if there's such a concept at all) is not going to be the same thing as the root URL (such as the OP which has templates as the site directory, but not every file under templates will become the root of the site). Rather, you want to serve the favicon at /favicon.ico via whatever capability your tool provides, such as a static or public folder. Although you can technically place it anywhere, it's canonically at /favicon.ico, because if you do so you don't have to add a <link> at all: all browsers can automatically get this icon. Some external tools might even not read the HTML document at all and assume favicons at this location.

Copy link
Contributor Author

@chrisdavidmills chrisdavidmills Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to me like you're overthinking this. Here we are talking about basic, static HTML, and by "directory", I'm talking about the physical folder on your computer. The reader of this is unlikely to be using a framework. Maybe I should just say "folder", update the URL to "/favicon.ico", and mention in a note that if it is placed here, most browsers will pick it up automatically?

Copy link
Contributor

@Odysseus-GH24 Odysseus-GH24 Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello. I have set up the framework 'Flask' some time ago, and this was indeed what confused me. As time passed, and my experience with web development being quite new, I somehow considered the Flask directories architecture as a basic HTML one. I only heard about the addition of favicons being a thing in Flask a day or two later in its documentation. I guess a small note talking about this would be nice? This was a head scratcher for me. I hope you won't curse me and my family for 10 generations, @chrisdavidmills.

Copy link
Contributor Author

@chrisdavidmills chrisdavidmills Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Odysseus-GH24 I stand corrected! I think the curses are all mine ;-)

Seriously, this is really interesting direct reader feedback, and also highlights the danger of making assumptions.

I'll update it tomorrow.

Copy link
Contributor Author

@chrisdavidmills chrisdavidmills Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I've made some more updates. I also took this opportunity to update the paths and URLs primer, to add some more details, distinguish between paths and URLs, and show how the two relate. That stuff was originally written about 10 years ago...

2. Adding the following {{htmlelement("link")}} element into your HTML's {{HTMLElement("head")}} block, which references the [path](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links#a_quick_primer_on_urls_and_paths) to the favicon file (in this case, the path is just the file name because the favicon is in the same directory as the HTML):

```html
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Expand Down Expand Up @@ -243,7 +243,7 @@ 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.

Expand Down