CODEWITHSUNDEEP
htmlfavicon
Markeee
Markeee

Reputation: 573

Real Favicon Generator errors with code and will it slow site down?

I've used the Real Favicon Generator to generate favicons and code. I've just run my HTML and CSS through a code validator (Total Validator Pro) and it is saying that there are two errors with some of the Real Favicon Generator code:

E620 The 'color' attribute is not valid for this tag in this context:
         <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#00736d">


W619 Unrecognised value for the 'name' attribute:
         <meta name="theme-color" content="#ffffff">

I'm a newbie so don't really know if I should be worried about this?

2. The Real Favicon Generator creates an .xml and .json file. My website is very simple static HTML and CSS website, with no javascript, Jquery or PHP etc. It is very fast to load. Will these additional .xml and .json files slow down the load time?

Thank you

Upvotes: 1

Views: 770

Answers (1)

philippe_b
philippe_b

Reputation: 41318

TL; DR

These two issues are harmless and the extra files won't slow down your site. You can use the package generated by RealFaviconGenerator as it is.

In details

RealFaviconGenerator author speaking.

The color is a proprietary attribute introduced by Apple. The purpose of this link markup is to have an icon in the pinned tabs of macOS Safari, and the colorattribute is mandatory: if you remove if, Safari won't pick a default color but will just ignore your pinned tab icon.

The theme-color is for Android Chrome, in order to style the address bar or task bar.

These two attributes are harmless and won't break anything. This code was tested on several browsers.

In addition, W3C validator apparently does not report these errors anymore. Could you check with your own site?

browserconfig.xml is for Edge and most recent versions of IE, while manifest.json is the Web App Manifest, mainly for Android Chrome. Browsers not interested in these files won't load them.

Upvotes: 2

Related Questions