favicon prefers color scheme
Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
New Guinea Freshwater CrocodileOP
Hey y’all,
I want my favicon to change depending on the mode of the browser or the OS of the user. I mean a white version for dark mode and a dark version for light mode. I use prefers color scheme media params on my link in the head and it works with my config. But not on my iPad (whatever the browser) and neither on some other config of people I know. I tried multiple way of using this prefer color scheme but that change nothing. On these people config and on my iPad whatever the mode (dark or light) the default icon stay visible. Please let me know if you get into this trouble or if you understand what I do the bad way. Thank you for your help 🙂
I want my favicon to change depending on the mode of the browser or the OS of the user. I mean a white version for dark mode and a dark version for light mode. I use prefers color scheme media params on my link in the head and it works with my config. But not on my iPad (whatever the browser) and neither on some other config of people I know. I tried multiple way of using this prefer color scheme but that change nothing. On these people config and on my iPad whatever the mode (dark or light) the default icon stay visible. Please let me know if you get into this trouble or if you understand what I do the bad way. Thank you for your help 🙂
51 Replies
@New Guinea Freshwater Crocodile Hey y’all,
I want my favicon to change depending on the mode of the browser or the OS of the user. I mean a white version for dark mode and a dark version for light mode. I use prefers color scheme media params on my link in the head and it works with my config. But not on my iPad (whatever the browser) and neither on some other config of people I know. I tried multiple way of using this prefer color scheme but that change nothing. On these people config and on my iPad whatever the mode (dark or light) the default icon stay visible. Please let me know if you get into this trouble or if you understand what I do the bad way. Thank you for your help 🙂
wait is your issue that ipad doesnt respect it?
New Guinea Freshwater CrocodileOP
Yes but not only IPad some windows 11 user on Firefox @ latest v for example. Or Mac intel user either on chrome or safari. As for me I use a mac M1 and it works wathever the browser. Thank you for your answer
i think thats out of your control ðŸ˜
New Guinea Freshwater CrocodileOP
Oh BTW I use the page version on this project
if you do the method to spec, it should work... but if they don't support it, you can't really do anything
New Guinea Freshwater CrocodileOP
Oh you mean it’s a normal behavior?
i haven't tried it in ipad...
New Guinea Freshwater CrocodileOP
I check the can I use and it’s supposed to work …
but apple is known to not follow standards the best
New Guinea Freshwater CrocodileOP
Yes I was expecting that but what about windows 11 😅
My customer expects me to make it work everywhere. You probably know what I mean 😅
yeah, but you say firefox doesn't support?
as it works for me... and i use firefox on win11
New Guinea Freshwater CrocodileOP
Yes Firefox is supposed to. That’s why I don’t understand. Could you provide me an example of how you would do this on document.tsx (page folder)?
umm, i haven't used pages dir for a while now... sorry
New Guinea Freshwater CrocodileOP
Ok I understand
Actually i got this :
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon.ico" />
<link rel="icon" media="(prefers-color-scheme: dark)" href="/dark.ico" />so this works?
New Guinea Freshwater CrocodileOP
this works on my M1 mac
but not on firefox on windows 11 and on IPad (but that's probably another problem here)
if you give me a link or [cloudflare tunnel](https://blog.cloudflare.com/tunnel-for-everyone/), i can test it for you
New Guinea Freshwater CrocodileOP
I can even give you the url of the production site
o.O that should be good
New Guinea Freshwater CrocodileOP
New Guinea Freshwater CrocodileOP
yes
as it works for me...
New Guinea Freshwater CrocodileOP
the light make the C black
what's your OS and browser?
can you make sure that the device is on dark mode, and not just firefox theme
@New Guinea Freshwater Crocodile what's your OS and browser?
windows 11 and firefox beta
New Guinea Freshwater CrocodileOP
OK so almost the same
maybe it could be a cache issue
but I remember that doesn't work on mac intel also even with chrome (but I ask myself if chrome was not just a safari mirror on intel)
are you sure the device was actually on dark mode, and not a browser theme?
New Guinea Freshwater CrocodileOP
yes I did it with the person
and for the intel mac that's my wife's work laptop ^^
so we try dark and light and it change nothing
hmm thats weird
Browsers cache favicons heavily
just know that
that won't be the issue
for me it carries on even when i use different projects
yeah, but its not the same image path
(i didnt read the entire thing)
New Guinea Freshwater CrocodileOP
But actually doesn't matter so much anymore. I told the customer it will be complicated
but just in case I would be interrested on what's wrong. Hope next 13 will make it better.
just say that it is up to spec, and you can't do much to fix
New Guinea Freshwater CrocodileOP
For now I will only use app dir
@riský just say that it is up to spec, and you can't do much to fix
New Guinea Freshwater CrocodileOP
I think it is. :/