Setting a single favicon for the entire website

Question

Currently I'm using this bit of code to add a favicon to a website:

<link rel="shortcut icon" href="https://www.mysite.co.uk/images/favicon/favicon1.ico" />

However, this code must be added to each HTML page. Does anyone know how to set a global favicon?

Everywhere I've looked tells me I must add it to each page.

UPDATE:

Chrome searches for a favicon.ico file in the root directory.

Firefox needs this on each page:

<link rel="icon" type="image/png" href="/favicon.png" />

Answer 1

For future reference use php to include the header information (including the favicon) that stays consistent on each page so that you only have to edit one file instead of a large number of files.

Use <?include "header.php" ?> on all pages where your header.php includes all the code that is common to all pages

It could be something like:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<script src="../quirksmode.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

and all the other code that needs to be included on all the pages

See more about include here: http://php.net/manual/en/function.include.php

EDIT: For now you could open all files in an editor like notepad++ and do a find and replace to replace all occurrences of with \r\n where \r\n is the newline character for windows in the extended search mode. Notepad++ has the option to do a find and replace in all open files.

Answer 2

No, you need to include the <link rel="shortcut icon"> element in every page. However, you can:

• Place the favicon.ico file in the root of your project, then refer to it as /favicon.ico.

As far as I know, it will be cached, so there's no problem of redownloading.

Answer 3

Most browsers search for /favicon.ico in the website. It usually caches and will work across the whole website from the one directory.

Answer 4

On most modern browsers, all you need to do is to put the favicon.ico file in the root of your website, it will cache and work on all pages.

Answer 5

What I did was create a script file that created the link element through the DOM and added the attributes. Use this code in a JavaScript file and link it to the HTML file (note this also works in markdown)

window.onload = function() {
  var link = top.document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = "./Australian_Kangaroo.ico";
  top.document.getElementsByTagName("head")[0].appendChild(link);
}

In the HTML, you need to link it through the script tag

<script src = "script.js"></script>

The advantage of this over the link tag is that you can add this JavaScript to a file that you have other functions in, so it will be less work.

Answer 6

Place the favicon in the root of your website named "favicon.ico".

If you want to use another format of icon (in the root directory) you could use htaccess (or equivalent) to set the mime type of ".ico" files to ".png" and rename the "favicon.png" to "favicon.ico".

In your htaccess file add the following code:

AddType image/png .ico