Every Drupal 8 site should have a custom favicon that helps to reinforce the site's brand - of this there is really no argument. But, over the past (more than a few) years, the role of the lowly favicon has grown from just the little icon on a browser tab. These days, favicons are also used on mobile devices as the gateway to your site. Keeping your brand strong in all contexts is more important than ever.
Luckily, the Responsive Favicons module, combined with Favicon Generator makes it pretty easy to keep your site's branding consistent across multiple platforms.
Assuming you have a relatively square-ish version of the site's logo, making this all happen is pretty easy.
First - head to Favicon Generator, upload the site's logo, then review/tweak the settings for the various contexts. You'll be asked for the "App name" (usually the site's name), suitable background colors (I selected a nice pear-color for the DrupalEasy logo - you can see it in the iOS mockup above), as well as image overrides (optional) for each context. For the "Favicon Generator options", select the "I will place favicon files at the root of my web site" option (at the recommendation of the Responsive Favicons module maintainers). At the end of the process, you'll get a zipped file full of all the necessary icons and meta data.
Next, download and install the Responsive Favicons module. Head to its configuration area (/admin/config/user-interface/responsive_favicons) and complete the form. For the "Path to responsive favicon files", I just used "favicons". The "Favicons tags" section is provided at the end of the Favicon Generator's process. Finally, point the zip file generated by the Favicon Generator to the final form field. Click to "Save configuration" and you should be all set!
Lessons like this (and much, much more) are taught during our 12-week, 3x/week Drupal Career Online course. Learn more and register for our free Taste of Drupal webinar to dive into the details of the course.
Comments
Metatags
Metatags is a better choice to add favicons in my humble opinion.
Thanks for the comment, but…
Thanks for the comment, but I like the Responsive Favicons solution a bit better because is easily covers many use cases and RealFaviconGenerator.net makes it very easy to create all the necessary images.
And why exactly ?
I don't see why Metatag would be a better option. It implies a lot of manual configuration, manual file upload, and will be harder to update once the standards changes or a new elements appear.
A solution like the one shown here allow us to give access to our marketing teams to manage this themselves in a multisite environment. No need to have access to the code to be able to upload images, no list of icons lost in the public files directory...
I'd really like to understand your point here.