Navigating the confusing mess of Favicon in a web project

Back in the day it was probably easy to add a favicon. You could just dump a PNG file renamed to favicon.ico and get on with your day. No more.

Recently I had to implement a favicon from scratch on a site where the SEO checkout told me this is a problem.

I'm using Laravel as a framework and the irony is Laravel already has a favicon.ico file in the public directory. One would think that most web servers just picks up and it works. Nope, unfortunately not. To make a site 100% consistent for favourite icons, you have to do a lot more work.

Let's first list the files that you will require in the public root of your project:

• favicon.ico

• favicon-16x16.png

• favicon-32x32.png

• apple-touch-icon.png

Next, you have to reference all these files. Here is an example of an index.html setup:

<!-- Favicons -->
<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">

At this point you'll have a fairly consistent site.