5

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.

Tabs

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:

Incorrect favicon

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?

2
  • 1
    The browser doesn't parse the HTML page when you're viewing its source so I don't think there's anything you can do.
    – JJJ
    Apr 1, 2016 at 20:40
  • 3
    Overwrite the root ico file with your icon
    – noa-dev
    Apr 1, 2016 at 20:41

4 Answers 4

4

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.

1

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

0

In Website, you can mention the favicon like below

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

and its working fine.

Where as in view source of chrome, they automattically find the favicon on below path https://www.tenayalodge.com/favicon.ico

Favicon to be fetched from added favicon.ico after your website.

0

A very simple way:

put your favicon.ico file on the root of the website.

That should be accessed like: http://www.[domain].com/favicon.ico

1
  • Name should be favicon.ico as this is the default name May 6, 2020 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.