How to set the favicon when viewing source in Chrome?

Question

I have a page that displays the incorrect favicon when I view its source.

In the following image, you can see in the first tab (which is viewing the page) using the correct favicon - favicon-tenaya.ico.

However, when you go to view the page's source via Ctrl + U, it seems to display the default favicon - favico.ico, which is in the website's root folder:

Is there a way to get around this? We don't want the favicon changing when they view the source. How does the view source page in Chrome decide which favicon to use?

Answer 1

Viewing the source of a page is browser-dependent. There nothing you can do to force it to display a specific icon. For example, Firefox doesn't display any icon at all for a "View source" tab.

However, you can influence browsers to achieve this. For Chrome and your particular web site, replace the existing favicon.ico at the root of your web site with your favicon. This is what Chrome displays and yours is the black and white icon you don't want. Even better: rename favicon-tenaya.ico to favicon.ico (thus replacing the existing favicon.ico) and change the HTML accordingly.

As an aside, you don't need two declarations. Just keep the shortcut icon one, although the other one should do just as well.

Answer 2

Since Chrome does not parse the html it uses default file "/images/favicon.ico" to show as favicon in view-source. If it doesnt find it it look into different other locations too. for example if you use wordpress it uses http://[domain]/wp-content/themes/[theme]/images/favicon.ico