18

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" />
MD XF
  • 7,860
  • 7
  • 40
  • 71
Switchfire
  • 556
  • 1
  • 5
  • 19
  • Do you have only one website? Have you tried this solution: http://stackoverflow.com/a/8687471/2427840 ? – Gimmy Jun 07 '13 at 08:41
  • @Gimmy I had a look at that solution and it's not working, I've cleared my cache too, it's funny as it works perfectly fine in chrome yet not firefox or IE or Safari, It's set in the root folder, aswell as a directory with a linked page (that seems to have set it for the entire website as it worked before I added it to the root)! – Switchfire Jun 10 '13 at 08:55
  • see http://stackoverflow.com/questions/260857/changing-website-favicon-dynamically – user7282 Jun 10 '13 at 09:19
  • You can read more about favicon here: http://en.wikipedia.org/wiki/Favicon – Gimmy Jun 11 '13 at 12:12

6 Answers6

26

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.

Rishi Dua
  • 2,296
  • 2
  • 24
  • 35
  • This is a great anwser, which I will use in the future, but the idea of using a global version is to get around not having to re-edit numerous other pages for it to take effect. – Switchfire Jun 14 '13 at 15:56
  • I got your point. I've added an alternate method now which you can use this time. – Rishi Dua Jun 15 '13 at 03:29
3

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.

Allan Taylor
  • 53
  • 7
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
3

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.

2

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

Albzi
  • 15,431
  • 6
  • 46
  • 63
2

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.

Marvin
  • 853
  • 2
  • 14
  • 38
0

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
Rob Farr
  • 853
  • 1
  • 9
  • 17
  • Hmm, hasn't worked for me, i've got my 'favicon.ico' in the root directory, with the code above or changed to ico. "AddType image/ico .ico". Not working – Switchfire Jun 11 '13 at 09:02
  • @Switchfire By default a .ico file has the type "image/x-icon"however you won't need the .htaccess code for .ico files as this should be configured by default. (that code was only for using png images as your favicon.ico file (so its actually favicon.png with an ico file extension) – Rob Farr Jun 11 '13 at 10:49