Search code examples
htmlfavicon

I cannot get the favicon to work on my website?


I tried to implement a favicon to my website but it is not working properly.

I think the problem is that in my code, I am using in the twice, one for the href=style and one for the favicon but I don't know how to fix it.

this is my code at the moment:

<head>
<title>title</title>
<link href="faviconfinal.jpg" rel="icon">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Solution

  • For the link type="shortcut icon" I recommend you have a png file. What I normally do for link shortcut icons is that I prepare a 256x256 or 512x512 transparent png icon and just save it in a location like images/icon.png.

    You should verify if the file is correctly located in your page. The easiest way to do this is opening your browser's console and looking for 404 errors. The easiest way to see it's working is the browser's tab showing your icon.

    Besides that, what you must have is a favicon.ico file at your root folder (where your index file is located). The icon has to be a .ico file. For Windows you can use IcoFX. For mixed use or Mac focused you could use either IconWorkshop or IconFactory.

    You don't need to specify the favicon.ico icon, it's the default icon. You can check more on this here