Html Icon not shown beside title - html

I have a favicon Logo for a website inside the folder "public/img/". This is the code that I have written:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/img/Logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
rel="stylesheet"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
But favicon is not displayed. Why is it not visible?

Try to refresh the cache by holding down СTRL + F5. Or test your app with another browser.
If that doesn't help, try this option:
<link rel="icon" type="image/png" href="/img/Logo.png" />

Related

Angular page reload issue due to browser cache

A Page on my website loads perfectly for very first time but if i reload it, it gets struck untill we clear browser cache.
Why is this happenng?
How can we resolve it?
Below is the code
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="ENoESU-ILobE1sHAs8D6mm3S3CohuUHq9ivlMeT2szI" />
<title>My Activity Sheet</title>
<!--Favicon-->
<link rel='shortcut icon' type='image/x-icon' href="<%url('favicon.ico')%>" />
<!-- Core Css -->
<link href="<% asset('static/vendors/angular-select/ui-select.css') %>" rel="stylesheet">
<link href="<% asset('css/mas.css') %>" rel="stylesheet">
<link href="<% asset('css/responsive.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/bootstrap/dataTables.bootstrap.min.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/dateipcker-angular/angular-datepicker.min.css') %>" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
#yield('pageLevelCSS')
<style>
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
#yield('pageLevelHeadJs')
<script>

Head element's going inside body

The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.

Why won't my viewport tag properly use device width on most mobile devices?

I am using following meta tag.
<!DOCTYPE html>
<html class="no-js" data-placeholder-focus="false">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0" />
<meta name="mobileoptimized" content="0" />
<title>index</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/custom.css">
</head>
when I open website from mobile, it is not responsive at all. I have not changed my css code.
Please, help me! Thank you!

How to Avoid conflict between jquery UI and Bootstrap

I am creating jquery collapsible set with sidebar and a search button. I need to apply bootstrap for this. If i include the bootsrap css file the collapsible is not visible.
Please help me to solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/demo_collapsible.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link href="css/jqueryscripttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />-->
</head>
<body>
</body>
</html>
This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().
You can customize your bootstrap to omit some features in order to prevent confliction: http://getbootstrap.com/customize/

CSS not linking when uploaded to a website

Can any of you spot an error here?? If there is one... I'm going bananas here... CSS page is not linking with html when uploaded to server. And W3 validation says "No Character Encoding Found! Falling back to UTF-8." ???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text</title>
<meta name="description" content="Another text">
<meta name="author" content="Content Text">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="initial-scale=1" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'><!-- About page Services -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <!-- H1, h2 -->
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'><!-- p -->
<!-- Stylesheets -->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
Do you need
#charset "utf-8";
/* CSS Document */
before starting css files?
<?php include('inc/header.php'); ?>
<div id="index" class="container">
<div class="container">
That ok to do isn't it? this include line is top of the page and above all other content
Your index file is not getting parsed as php. 1) Did you give it a .php extension? 2) Does your server have php installed on it?