Since one month I always tried to fix my mobile SERP favicon and google recrawled my site many times in the meantime. Even though it's still not working. The GSC isn't showing it either, same with Lighthouse...
What have I done wrong?
Here is my favicon code:
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="https://eselsbruecken-generator.de/data/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://eselsbruecken-generator.de/data/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://eselsbruecken-generator.de/data/favicon-16x16.png">
<link rel="manifest" href="https://eselsbruecken-generator.de/data/site.webmanifest">
<link rel="mask-icon" href="https://eselsbruecken-generator.de/data/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="https://eselsbruecken-generator.de/data/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/data/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- favicon end -->
I am grateful for anything helpful...
Have a nice day!
Related
When i run the npm run build its give me the build but when i place it in the tomcat webapps its so me error
Failed to load resource: the server responded with a status of 404 ()
But when i place the . in html file its work.
Code its not working:-
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="8080/build/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="8080/build/manifest.json" />
<title>GV App</title>
<script defer="defer" src="8080/build/static/js/main.99658d36.js"></script>
<link href="8080/build/static/css/main.0dd94b59.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
Code its working when i place the dot like href="./logo192.png" :-
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="./manifest.json" />
<title>GV App</title>
<script defer="defer" src="./static/js/main.55119f6e.js"></script>
<link href="./static/css/main.d962d6c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
I got my logo which is an SVG file for my react project which is saved in my images folder , i wanted to use this SVG icon on my browser tab , am i able to use SVG files ? and how i can link to it , i tried doing the following in the head tag in the index.html file but didnt work .
<head>
<meta charset="utf-8" />
<link rel="icon" href="src\images\logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="src\images\logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&family=Mulish:wght#300;400;700&family=Playfair+Display:wght#700&display=swap"
rel="stylesheet"
/>
<title>Thousand Sunny Travel Agency</title>
</head>
I am new in web developing and I just finish my first website: www.aviakassir.az
But I face the problem when try to open my website on mobile device. Some part of my header not diplayed at all (contact and languages line on top). Menu is splitted into two parts and search script located down the image.
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
<meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aviakassir</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/jquery-customselect.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/assets/revolution/layers.css">
<link rel="stylesheet" href="css/assets/revolution/navigation.css">
<link rel="stylesheet" href="css/assets/revolution/settings.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
What I missed here? Here how my page looks in mobile Chrome:
Check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
#media only screen and (max-width: 767px)
.header-top-left {
display: none;
}
set display: block;
I'm new to React material-ui. I used their guide and created simple Appbar (same as theirs). However, my appbar looks different than theirs:
My Appbar:
It should've looked like this:
https://codesandbox.io/s/m3m1x5qxw8
I have installed npm install #material-ui/core
I have added Roboto fonts to my index.html in the head part.Here is a screenshot of my index.html
My code is literally same as their code, only changed the function name. However, this AppBar is located under this:
<div> // it is the root div
<Header2/> // the appbar
Their color is not the same, their font is not the same.
What did I do wrong?
As it turns out I shouldn't be using react material-ui and react-bootstrap together:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I intend to use react-material-ui, but for those who wants to use both of them together, if you have a solution, please share it :)
I want to add a favicon to my react application but it doesn't seem to working.
Tried the below:
add the code to the index.html file in the head section
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.
Thanks.
Remember to add %PUBLIC_URL% to all your href attributes in index.html
For example;
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
That should fix your issue.