You’ll have to make an image that is at least squared (so width and height must be equal); also, what I suggest is that the logo is visible to the eye of the one who opens the website in the browser’s tab (so don’t write things that might be only readable on a square with size 256x256 for example). For example, I have a 32x32 image that is also visible without losing all the detail of the logo itself. Anyway either 16x16, 32x32 or 64x64 are fine.
After this, make sure to save it in ICO (or at least convert it so that the ICO file is in a format that makes the logo visible on the browser tab), then most browsers might already detect a favicon if it’s saved as favicon.ico
on your home page (and so upload it on your htdocs
folder), but if it doesn’t add this to your head tag on every page of your website:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Also make sure to replace favicon.ico
with the name of the file you uploaded into your htdocs
folder and image/x-icon
with the MIME type of the image you uploaded if different from an ICO file. Like this, you won’t have problems with showing the website logo on other pages that aren’t in the root folder (so not the home page) and the home page itself, which is in the root folder. Even other image formats might work fine, but I only tried it with ICO in my case.