HTML5 validation (Expected a CSS media feature but saw device-width instead)

[damianobarbati]

Can favicons plugin move to css media features instead of using device-width?

Error: Bad value (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) for attribute media on element link: Expected a CSS media feature but saw device-width instead.
From line 7, column 1396; to line 7, column 1584
icon.ico"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/build/icons/apple-touch-startup-image-320x460.png"><link 
Error: Bad value (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) for attribute media on element link: Expected a CSS media feature but saw device-width instead.
From line 7, column 1585; to line 7, column 1773
x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/build/icons/apple-touch-startup-image-640x920.png"><link 
Error: Bad value (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) for attribute media on element link: Expected a CSS media feature but saw device-width instead.
From line 7, column 1774; to line 7, column 1963
x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/build/icons/apple-touch-startup-image-640x1096.png"><link 

[paulcalabro]

I came across this myself. I think this change actually has to happen upstream:

https://github.com/evilebottnawi/favicons/blob/4eccf831d70151fc5a2be35ba8be64910f58a00d/config/html.json

[joepagan]

This is still happening today.

You can satisfy w3c validator by turning off the appleStartup favicons:
appleStartup: false,

It looks like the parent evilebottnawi/favicons` script hasn't changed since 2016, so, need some sort of file replacement, or, a specific version of that.