(Vue.js) The icon does not apply - html

<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg">
I added this code.
But the icon does not apply.
The file structure is
test
 └icons
  └safari-pinned-tab.svg
  └favicon-16x16.png
  └favicon-32x32.png
  └apple-touch-icon.png
 └index.html

Try this.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="icons/apple-touch-icon.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/apple-touch-icon.png">
</head>
<body>
<!-- DO NOT touch the -->
</body>
</html>

Related

Favicon only showing for index route

I'm running a react / webpack application and the favicon does not show when loading any route of my app other than the index ("/").
/public/app-bundle.js --> react/webpack bundle
/public/favicon --> directory with favicon assets
/public/index.html --> see below
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicon/favicon-16x16.png"
/>
<link rel="manifest" href="./favicon/site.webmanifest" />
<link
rel="mask-icon"
href="./favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<link rel="icon" href="./favicon/favicon.ico" />
Please consider the page will request pages from the server, not from the filesystem
So remove "." before on hrefs.
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
<link
rel="mask-icon"
href="/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<link rel="icon" href="/favicon/favicon.ico" />
Remember if starting with slash ("/") means get from server root if not relative where baseUrl is.

Check the name of the favicon displayed in the browser tab

In a website's source code, there are several icons linked:
<link rel="icon" type="image/png" sizes="192x192" href="mysite.net/assets/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="mysite.net/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="mysite.net/assets/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="mysite.net/assets/icons/favicon-16x16.png">
How can I check specifically which icon is used as a favicon and displayed in a browser's tab?
There is no other <link rel="icon" ...> in the source code.

How do I make my site show a favicon in the bookmark toolbar in Firefox?

None of these seem to work. It works for tabs, but not bookmarks bar
<link rel="shortcut icon" type="image/png" href="/favicon/favicon-196x196.png" />
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
Try using absolute path instead of relative path.
<link rel="shortcut icon" href="http://example.com/favicon.ico" />

Why doesn't my favicon display on my template page but does on my index page?

Click here for template page code
Click here for index page code
The favicon displays on the index page , the same code is on the template page but doesn't display the favicon(and the directory is declared ../recources) I've tried many articles and worked with a colleague but still can't find the problem.
Thanks for your time,
Ayaan
Template section:
<!DOCTYPE html>
<html >
<head>
<div class="background-test"> </div>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saturn Studios offers a wide range of website templates!">
<link rel="apple-touch-icon" sizes="57x57" href="../recources/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../recources/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../recources/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../recources/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../recources/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../recources/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../recources/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../recources/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../recources/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../recources/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../recources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../recources/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../recources/favicons/favicon-16x16.png">
<link rel="manifest" href="../recources/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../recources/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../recources/styles/style.css">
<link rel="stylesheet" type="text/css" href="../recources/styles/queries.css">
<link rel="stylesheet" type="text/css" href="../recources/styles/grid.css">
<title>Website Templates</title>
</head>
</html>
Index (this one works)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saturn Studios is here to take your website idea to the final frontier.">
<link rel="apple-touch-icon" sizes="57x57" href="recources/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="recources/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="recources/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="recources/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="recources/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="recources/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="recources/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="recources/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="recources/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="recources/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="recources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="recources/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="recources/favicons/favicon-16x16.png">
<link rel="manifest" href="recources/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="recources/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="recources/styles/style.css">
<link rel="stylesheet" type="text/css" href="recources/styles/queries.css">
<link rel="stylesheet" type="text/css" href="recources/styles/grid.css">
<title>Saturn Studios Official</title>
</head>
Try using ./resources/favicons/ms-icon-144x144.png as path.

Favicon not implemented

Added favicon files to the github page
and pasted the following code below . It's not working though! I'm on chrome. What could be the problem?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<link href="fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; rel="stylesheet" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Try to reset cookies in your browser (in Chrome just ctrl+shift+r)
Check in developer console if there is no 404 errors and icons coming through.
Like all you need to have:
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="apple-icon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="apple-icon-16x16.png">
Your paths in the href attribute are wrong. You are telling the browser they are in the root-directory of your project (which in this case, is the first thing that comes up when you open the page in github, your screenshot as reference)
You have a folder named Favicon.ico (which I would change into something like icons, as .ico is usually associated with a file)
So, in your HTML you have to adjust the paths, so the browser knows in which directory these icons are, e.g.:
<link rel="icon" type="image/png" sizes="32x32" href="/Favicon.ico/favicon-32x32.png">