DuckDuckGo browser requires favicon.ico

[santaimpersonator]

Issue (Original)

When following the instructions for changing the favicon, users should be aware that the file name must be favicon.png.

Originally, this didn't used to matter. However, recently we noticed a bunch of failed requests utilizing the development server. For example, this is how we used to configure the favicon in our documentation:

theme:
  # Icon in Browser Tab (must be a square image - i.e. 32x32 pixels)
  favicon: assets/img/sfe_logo_sq.png

Issue (Updated)

The DuckDuckGo browser submits multiple requests for a favicon.ico file, which throws warning messages when utilizing the development server.

INFO    -  Documentation built in 16.81 seconds
INFO    -  [10:42:47] Watching paths for changes: 'C:\Users\$username\AppData\Local\Temp\docs_8ulu5o_m', 'mkdocs.yml', 'docs'
INFO    -  [10:42:47] Serving on http://127.0.0.1:8000/SparkFun_Thing_Plus_RA6M5/ and opening it in a browser
WARNING -  [10:42:55] "GET /favicon.ico HTTP/1.1" code 404
INFO    -  [10:42:56] Browser connected: http://127.0.0.1:8000/SparkFun_Thing_Plus_RA6M5/introduction/
WARNING -  [10:42:56] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:43:03] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:43:03] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:43:04] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:43:04] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:17] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:18] "GET /favicon.ico HTTP/1.1" code 404
INFO    -  [10:44:19] Browser connected: http://127.0.0.1:8000/SparkFun_Thing_Plus_RA6M5/hardware_overview/
WARNING -  [10:44:19] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:25] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:26] "GET /favicon.ico HTTP/1.1" code 404
INFO    -  [10:44:26] Browser connected: http://127.0.0.1:8000/SparkFun_Thing_Plus_RA6M5/hardware_assembly/
WARNING -  [10:44:26] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:27] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:27] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:33] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:33] "GET /favicon.ico HTTP/1.1" code 404
INFO    -  [10:44:33] Browser connected: http://127.0.0.1:8000/SparkFun_Thing_Plus_RA6M5/example-codeless/
WARNING -  [10:44:33] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:35] "GET /favicon.ico HTTP/1.1" code 404
WARNING -  [10:44:35] "GET /favicon.ico HTTP/1.1" code 404

Reproduction

test-favicon.zip

Fix

The solution is to rename the file to favicon.png and adjust the file name in the mkdocs.yml configuration as well.
The solution was to create a favicon.ico file in the /docs directory.

[alexvoss]

Various bits of documentation suggest that this is not the case. Favicons can have different file formats and any name you like. They are declared using a link element in the HTML, which Material for MkDocs will insert into the pages.

Which browser are you using to access your site that produces the 404s? Can you make this reproducible so we might have a look at it? Also, note that the browser seems to be looking for favicon.ico, not favicon.png, so not sure if using a favicon.png would help here?

[santaimpersonator]

As mentioned below (#7114 (reply in thread)), I found that this was actually a browser specific issue with the DuckDuckGo. The filename was irreleavent, as you had pointed out.

*I renamed the discussion title; then, updated the original post with a reproduction and fix.

[kamilkrzyskow]

Weird, something has to create this /favicon.ico request to the server to invoke this 404 error.
Meta/robots scrapers should comply with the usual setup where the rel=icon defines the favicon 🤔

mkdocs-material/src/templates/base.html

Lines 79 to 80 in 9d901a3

	<!-- Favicon -->
	<link rel="icon" href="{{ config.theme.favicon | url }}" />

However, testing on my Firefox browser and local example defining a favicon: test.png doesn't render it on the browser tab, there are no errors in the log, and changing it to favicon: favicon.png does fix it in Firefox. But that's a Firefox oddity, because Chrome does render test.png properly.

[alexvoss]

I have created an example as well and tested it on Firefox and it worked just fine. That was on both MacOS and Windows - oh, and using the Insider Edition, in case that makes a different.

[kamilkrzyskow]

Thanks for further sanity checks, I did a revisit to my testing method, and it turned out that the test.png image I used had a dimension of 242x248 pixels, so not a perfect square. I fixed it up to 242x242 and it showed up on the browser tab after refresh. Then I moved back to 242x248 and it disappeared again, but then I opened test.png in a new browser tab, and it loaded and showed up fine on the tab...
Also over the many page reloads and config changes between renaming the filename to test.png and test2.png I got one singular:

WARNING -  [21:09:16] "GET /favicon.ico HTTP/1.1" code 404

and I never used that name. It has to be some sort of automatic behaviour in the browser, because the Material theme uses a favicon.png by default, not a favicon.ico.

Funny thing is, I can't reproduce it again. I also had the Dev Console open to see 404 requests in case of a bad naming typo, but there was no error and the icon just didn't want to show up on the tab for some time...

So anyway it's like you said, everything works as expected, just needs a couple of refreshes 😅
favicon-test.zip

[santaimpersonator]

While creating a reproduction, I discovered the actual problem is browser specific (I renamed the discussion title and updated the original post with a reproduction).

I found that this is specific to the duckduckgo browser and the filename was irreleavent. The issue just appeared to be resolved when I had closed the Duckduckgo browser.

The fix for the DuckDuckGo browser was to include a favicon.ico file in the /docs directory.

[santaimpersonator]

@kamilkrzyskow A while back, I also noticed that it required a square image 😅