256 Kilobytes

Answers in Server-Side | By August R. Garcia

Published 3 weeks agoTue, 19 Nov 2019 18:52:51 -0800 | Last update 3 weeks agoTue, 19 Nov 2019 19:45:31 -0800

57 views, 1 RAM, and 0 comments

Tags: PHP, HTML, Favicons, Base64 Encoding, Progressive Web Apps, PWAs

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 208 🗨 1036 🐏 319
Site Owner

As discussed previously, there are a fair number of dumbass things that can be done with base64 encoding that are occasionally so dumb that they even work effectively. And, boy, am I excited to finally have a viable use case for base64 encoding a favicon.

According to a thread on Stack Overflow, there is or was a known issue related to progressive-web apps and favicon caching. Apparently there is an actual fix as described by Chrome's developers here. Regardless, some Chrome-specific favicon caching issue--or possibly the same issue--came up like five minutes ago. Anyway, check out this quality hack that can be done with base64 encoding, such as with a tool like base64-image.de

/*
 * inc/favicon.php
 * 
 * The site's favicon. Includes one of these two favicon formats: 
 * --> A normal/standard <link> to the actual file, which is 4.0 KB; and 
 * --> A base64 encoded version of the site's favicon. Faster on Chrome because there is some favicon caching issue with Chrome
 *     and this results in one fewer HTTP request, even though it is roughly 5-6KB worth of data instead of 4.0 KB. 
 *     This is still faster than constantly making an additional HTTP request. 
*/
// Re: Search for "favicon not caching." Probably related to PWA functionality (?) on Chrome, although that is allegedly fixed. 
// https://stackoverflow.com/questions/49634443/favicons-still-fetching-despite-caching-them
// If on Chrome, use a base64 encoded version instead to prevent constantly needing to make an extra HTTP request. 
// Surely there is a "real" solution to this. 
$user_agent = $_SERVER['HTTP_USER_AGENT'] ?? NULL;
?>
<?php if ( !$user_agent || get_browser_name($user_agent) != "Chrome" ): ?>
        <link rel="shortcut icon" href="/favicon.ico" />
<?php else: ?>
        <link rel="shortcut icon" href='data:image/x-icon;base64,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' />
<?php endif; ?>

The function get_browser_name() is from a previous post on determining a user's browser with PHP. If you would prefer to not include the full function, this can be done with:

<?php if ( !$user_agent || strpos(strtolower($user_agent), 'chrome') === false ): ?>
        <!-- Put rest of code here -->

Ideally, getting the actual favicon.ico file to cache would be superior, but if it's being fetched by Chrome regardless, this is superior in terms of performance, reducing the amount of time for the full content download (the "Finish" value in Chrome's dev tools --> Network) by around 80-200MS, which is substantial to obscene amounts of performance.

Edit: Checked a few other sites run by others and saw similar favicon caching issues on Chrome, but not FireFox. Seems plausibly unrelated to progressive web apps. Also, 256KB uses basically the bare minimum possible PWA functionality, so that may be entirely irrelevant to this site as well.

Users Who Have Downloaded More RAM:
Hash Brown (3 weeks ago)
🐏 ⨉ 1
Posted by August R. Garcia 3 weeks ago

Edit History

• [2019-11-19 18:52 PST] August R. Garcia (3 weeks ago)
• [2019-11-19 18:52 PST] August R. Garcia (3 weeks ago)
• [2019-11-19 18:52 PST] August R. Garcia (3 weeks ago)
• [2019-11-19 18:52 PST] August R. Garcia (3 weeks ago)
• [2019-11-19 18:52 PST] August R. Garcia (3 weeks ago)
🕓 Posted at 19 November, 2019 18:52 PM PST

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.