Search code examples
htmlfaviconview-source

Favicon doesn't show up in viewsource, or on images. (localhost chrome)

I'm currently creating a website, and I'm almost finished, but there's one problem. The favicon does not show up on view source, or on an image (in localhost, chrome). You see, I'm not sure if I'm doing something wrong or if this is just a bug. Thanks for the help.

enter image description here

See, no favicon will show up in view-source. This is the same with images. But if I hop over to google, they don't have this problem.

enter image description here

Is this problem happening just because I'm on localhost, and when I publish my site it will be fine?

Thank you.

. .

Also this is my code that I currently have for my favicon:

<link rel="apple-touch-icon" sizes="180x180" href="./css/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./css/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./css/images/favicons/favicon-16x16.png">
<link rel="manifest" href="./css/images/favicons/site.webmanifest">
<link rel="mask-icon" href="./css/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./css/images/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="test">
<meta name="application-name" content="test">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./css/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
Solution

  • Please show us the link rel of your head tags to see if you are doing something wrong. I can edit my answer later if you edit your post.

    There is not much details about your question, so I will just try to tell you how to set a favicon for your website.

    Try deleting the one you made. Remove it from wherever you have placed it. Make sure you have named it favicon.ico and place it in your root folder of your website, where index.html is.

    Then in the head section add the following code:

    <link rel='icon' href='favicon.ico'>

    You could also try to visit your localhost page with a private navigation. Sometimes favicons get messed up with browser's cache and history.

    You could also check your favicon with real path (full URL) localhost/mysite/css/favicons/favicon.ico to check if it really exists there.

    After discussing with the OP the problem happens only with the view-source: command, and the icon shows itself otherwise. So this is a normal behavior, as you can see even on google or whatever website the favicon disappears with the view-source: command.