Change favicon in a Wamp project

0

I used the following code inside to change the favicon of my project

<link rel="shortcut icon" href="img/favicon.ico"/>

It worked fine in the index, but when inserting the same code in the other pages the favicon remains the Wamp standard.

Ps. the directory of the pages are the same, then the link is pointing to the same image, inside the same folder (img).

Can anyone see a light for my problem?

My code looks like this:

Idonotknowwhytheinsertedcodethatchangesthefaviconisonlybeingre-echoedontheindexpage.Thefollowingimagewasonlypostedtoshowthatthebrowserdoesnotrecognizethecodeinquestion:

Ontheotherpagesitdoesnotrecognizethelineofcode:

    
asked by anonymous 05.01.2018 / 13:50

1 answer

0

This is because the browser itself attempts to search for the favicon.ico image in the root folder of your site or localhost. This happens usually in Safari and Chrome (in other browsers I did not notice this behavior), so when does not define :

<link rel="shortcut icon" href="...."/>

The browser alone will try to search for http://localhost/favicon.ico or http://site.com/favicon.ico

What you can do is to put your favicon in the root folder of Wamp and clear the browser cache, or simply create an include via PHP and add on all pages:

header.php:

<link rel="shortcut icon" href="...caminho do favicon..."/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

And on all pages add:

<head>
  <title>Meu titulo</title>
  <?php include 'header.php'; ?>
</head>

Relative vs. Absolute Paths

The relative path is the one that loads relative to the current page path, so if it is on the page

 http://localhost/pagina.php

It will look for the favicon in:

 http://localhost/img/favicon.ico

if you're on the page

 http://localhost/foo/bar/baz/pagina.php

It will look for the favicon in:

 http://localhost/foo/bar/baz/img/favicon.ico

That is the wrong way, so to avoid this add the full (absolute) path of the favicon, for example:

header.php:

<link rel="shortcut icon" href="http://localhost/img/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

However if you are going to send to a server, this will not work then you will have to change the address, in case you can only use the absolute path, without HTTP, putting a forward slash like this /img/favicon.ico , this way it will look up from root, example:

<link rel="shortcut icon" href="/img/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
05.01.2018 / 13:59