The little icon that shows up in each web page’s browser tab is called a “favicon”. Adding this tiny detail really gives your website a professional appearance in the browser. Here’s how to do it.
If You’re Using WordPress…
WordPress provides a way to specify the favicon. Log into your site and go to Appearance -> Customize.
Then click on Site Identity and click on the logo area. There, you can specify an image to be your logo.
WordPress recommends it be at least 250px by 250px wide because it also uses it as your iOS button logo. Just keep in mind that it will be shrunken down to 16px by 16px in the browser tab.
If the logo is not square, WordPress will let you crop it right in the admin.
After you specify the image, save, and you’re done!
If You Have FTP Access to Your Site…
Alternatively, if you’re not using WordPress and you are able to FTP to your server, you can place your favicon image in the root and add one line of code to the <head> portion of the pages to specify it.
You’ll need to generate the artwork. Keep in mind that it will be reduced to a 16 x 16-pixel square, so it can’t be too detailed. To allow for higher resolutions in the future, I generate it as a 32 x 32-pixel image. The browser will reduce it as needed. Create your icon and save it as a .png file, then FTP it up to the root of your site.
Add the Head Code
Since I wrote this article in 2012, the browser makers have standardized and now you just need one snippet of code and one icon file type. The following piece of code in the <head> section of your site will work for the latest versions of all major browsers now:
<link rel="shortcut icon" href="http://www.yoursite.com/your_favicon.png" type="image/x-icon" />
Substitute the path to your 32 by 32 pixel.png image path inside the href.
One Important Caveat
Note that all browsers employ caching when it comes to images, including the icon image. So, when you’re testing this you’ll need to clear your browser cache whenever you change the icon.
Hope this helps! – Brian