Route directly to an S3-hosted asset?

Question

I have a multi-site Craft install. I'd like to offer the ability for each site to upload an icon that will be used for favicons. I noticed a lot of 404s for both /favicon.ico and /apple-touch-icon.png, which appear to be hardcoded in various clients. I'd thus like to route those URLs directly to the requisite asset files, but on a per-site basis.

• I can't just put the files into /web, since that's shared among all the sites, and I want site-specific icons.
• I'm hosting assets on S3 (since we are using a load balancer).

Is there a way to do this in Craft without writing a custom plugin to do so?

If there exists a plugin to do this, or if I could do it via Craft directly, that would be wonderful, but I cannot find a way to do so.

If I have to write a custom plugin, I'd have it basically:

• Respond to those URLs
• Look up the requisite field in Globals for the assets on a per-site basis.
• Download the asset file locally (and cache locally in /storage)
• Set the proper MIME type
• Serve the file from /storage directly

Does this sound reasonable or would there be a better way to handle this?

Thanks in advance for any assistance!

Answer 1

By default browsers look for a favicon at the root of your web directory. So if you do not add a link in your head section, but you have a favicon.ico at webroot, you will still see it.

However, a favicon can technically be located anywhere. If you have a multi-site installation you can reference it like this (note that you should always use a fully qualified URL or you may run into issues with IE):

<link rel="shortcut icon" href="https://yourbucket.s3.amazonaws.com/{{currentSite.handle}}/favicons/favicon.ico" type="image/x-icon">

Insert Craft's current site handle tag so that you can use the same code on all sites. Then you'll just need to create a paths in your S3 bucket to match.

Regarding multiple sizes, you should include more than just a 16x16 favicon. This is what I have which is all related to icon display:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<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="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#888888">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">

The manifest, mask-icon, msapplication-TileColor, and theme-color all refer to how your favicon will appear on platforms including Safari, Windows and Android devices.

You could add an image transform to your asset volume which creates each of the required sizes, or you could direct your client to upload multiple sizes. It may be easier to send them to this site to generate favicons which they can then upload to their assets volume.

Disclaimer, I have no affiliation to the Favicon Generator site -- I just use it frequently. I generated the code you see above using this tool. If you're looking for a reliable way to generate your favicon size variations and the associated code, this online tool does the trick.