How to set/link favicon in yield laravel on chrome? - html

I want to put my link icon in yield and it doesn't work,
If I put on section it work smoothly. I don't want to put it in every page.
Here is my code
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>#yield('title')</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="shortcut icon" sizes="72x72" href="{{{ asset('assets/img/ficon.png') }}}">
<!-- CSS Files -->
<link href="./assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="./assets/css/now-ui-kit.css?v=1.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="./assets/css/demo.css" rel="stylesheet" />
Update :: I was open in firefox it works but can't display on chrome, also I was update my chrome but still not working...

try adding the size, your png might be too big.
//resize the image using a photo editing software to either 144x144,114x114 or 72x72
//then specify the size like below
<link rel="shortcut icon" sizes="114x114" href="{{{ asset('assets/img/ficon.png') }}}">
or try this:
<link rel="shortcut icon" sizes="114x114" href="assets/img/ficon.png">
you can also try this solution found here to fix the chrome issue

Related

Laravel Asset Links not working

I want to install the "Metronic" Admin Theme in Laravel and therefore adjust the links in the header to the correct paths.
The current header looks like this:
<head>
<meta charset="utf-8" />
<title>Metronic Admin Theme #1 | Blank Page Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Preview page of Metronic Admin Theme #1 for blank page layout" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
I copied all the folders needed into the resources/assets/ folder, but still it is not found when loading the page and no matter how I change the path it is not found. How would I need to adjust this correctly?
you can use {{asset}} which allows you to link to an asset within
your public directory
try
<link href="{{ asset('/global/css/components.min.css') }}"" rel="stylesheet" type="text/css" />
https://laravel.com/docs/5.4/helpers#method-asset
Copy assets folder of Metronic theme and past to your application's public folder. Add your resource link by following line:
<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
By Metronic you maybe forgot to call
npm run dev
or
npm run prod
according to docs
Metronic Laravel

Bootstrap and Stylesheet not loading Locally

I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.

Reset favicon html [duplicate]

This question already has answers here:
How do I force a favicon refresh?
(33 answers)
Closed 6 years ago.
I'm working on a project. Using mamp on a Mac. I'm trying to reset the favicon but my browser is bound and determined to not change it.
First I switched files
Then I turned mamp off and on
Then I emptied catch and hard reset
Then then I completely removed the original directory and emptied catch...still there
Then I restarted my computer entirely and reset catch
This is one stubborn favicon 😳
How do I reset my favicon?
<head>
<title>foo</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<meta charset="UTF-8">
<meta name="description" content="foo">
<meta name="keywords" content="foo">
<meta name="author" content="foo">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicon/manifest.json">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
The folder the favicons are in is called "favicon" and it's at the root of my server.
Could you try appending version numbers in the image files and see if it works? Something like
href="/favicon/favicon-32x32.png?v=1.0"
I would suggest that you change the name of the file and in your code. Than clear your cache files from the browser and refresh. Chrome tends not to update it's cache files when you refresh the page.

css is not loading properly in IE 8

My stylesheet page is not working in IE 8.Styles are showing in css page.But it doesn't works well. Its works well in firefox.Here I added my code.Anybody can explain me?
<html class="no-js no-touch"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Tasmanian Self-Drive Tour – eBook guides</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Imagine arriving in Tasmania and being able to start sightseeing immediately, with absolutely no effort. With either of these eBooks, you’ll have the easiest holiday you’ve ever had."><meta name="keywords" content="Tasmania, Tasmanian, selfdrive tour, self-drive tour, touring Tasmania, driving around Tasmania, Tasmania by car, sightseeing Tasmania, travelling around Tasmania, travelling with kids, tassie, tassie tour, tasmania with kids">
<!--BEGIN-STYLESHEETS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- google font css link -->
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- additional styles -->
<link href="css/main.css" rel="stylesheet" media="all">
<link href="css/component.css" rel="stylesheet" media="all">
<link href="css/responsive.css" rel="stylesheet" media="all">
<style type="text/css"></style>
<!-- Enable this css if you want to override styles-->
<!--<link href="css/override.css" rel="stylesheet" media="screen">-->
<!--END-OF-STYLESHEETS-->
<!-- Favicon and Apple Icons -->
<link rel="shortcut icon" href="img/icons/favicon.ico">
<link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-touch-icon-144x144.png">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
IE8 is kinda a nightmare browser, a bit less than IE7 and quite a bit more than IE9. IE has been that way ever since Microsoft "won" the browser wars (against Netscape) and put on the brakes.
What you can do for IE8: build a set of CSS rules it is happy with and add conditional comments to only make IE8 see them.
What I do usually: add rules in a file for IE8 only to work around the browser's lack of abilities and outright bugs.
e.g.:
<!--[if IE 8]><link rel="stylesheet" href="IE8.css"><![endif]-->
(add that after the normal link to you stylesheet so it can overrule with the same specificity)

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?