1

To generate favicons, I went through the process on this website:

https://realfavicongenerator.net/

On my WordPress website, I created the following snippet in functions.php:

add_action('wp_head', 'favicon_link' );
function favicon_link() {   
    echo '  
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">';   
}

I'm negatively surprised that all favicons are loaded. I expected some kind of fallback. They are not even loaded simultaneously, but one after another, taking 1 second despite their small size. Can I change my code to make only "the right" favicon loaded or improve performance in another way?

GTmetrix waterfall

Ryszard Jędraszyk
  • 2,296
  • 4
  • 23
  • 52
  • It's your browser that's loading these files. A different browser (Firefox for Android) will surely also load the favicon icon(s) it needs as well. If you don't want them downloading multiple favicon icons (something I wouldn't bother with, their size is really small anyways so your speed gain would be minimal as well) you can simply use one file (favicon.ico). If I were you though, I'd focus on making my site's stylesheet(s) smaller and also I'd switch FontAwesome with some hand-picked icons from Fontello (smaller font file, better loading times). – cabrerahector Jun 01 '19 at 00:52
  • While their size is small, they consume surprisingly a lot of "full load" time. I'm really disappointed with https://realfavicongenerator.net/, why would it generate 16x16 and 32x32 icons with HTML code to make the browser load them if I'm supposedly fine just with .ico? About Font Awesome replacement, no clean way to do it with a theme that uses Font Awesome a lot and through `@font-face`. – Ryszard Jędraszyk Jun 01 '19 at 02:48
  • I've read this answer: https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions?answertab=active#tab-top, but it doesn't specify what browsers and versions have trouble generating favicon.ico in low resolution. – Ryszard Jędraszyk Jun 01 '19 at 02:56
  • Hi @RyszardJędraszyk, RealFaviconGenerator's author speaking. That's right, what RFG generates today is (probably) sub-optimal. Creating less icons while keeping the same compatibility level and the same quality is the most important change to come in RFG. It's not that simple: in addition to looking for "icon / no icon" on several platforms, the observation must include the quality of the icon. Is the 32x32 icon resized? How? etc. Because you, as a user, need the best favicon package without having to answer hard questions. – philippe_b Jun 03 '19 at 10:13
  • @RyszardJędraszyk Browsers are smart enough to load favicon last, limiting the impact of the issue. Even if this is not ideal, the user experience should not suffer from the "favicon verbosity". – philippe_b Jun 03 '19 at 10:16

0 Answers0