I have a problem with my favicon icons, they are in public folder inside img folder and html looks like this:
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/manifest.json">
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="msapplication-config" content="img/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
I am 100% sure that the href is correct because if I copy it it shows me the image, however the icon is not displayed in the tab. What can I do about it?
Try to add ?version=1 to href. Google Chrome caches favicons very hard.
Try this
<link rel="icon" type="image/png" sizes="16x16" href="{{URL::asset('img/favicon-16x16.png')}}">
Related
<html lang="en">
<head>
<title>Corey Maller</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
I want to make some small changes to my css file but the website is not responding to them. Is there any kind of caching html code I could add to the header?
Im hosting a laravel app on a CentOS VPS and I use git, after pushing some modifications and checking the site suddenly the site stoped loading local files like css and js (404 not found) but yet loading external files from CDNS like bootstrap and jquery...
Please advice
snippet of code from the head of master page
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('assets/favicons/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('assets/favicons/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('assets/favicons/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('assets/favicons/apple-icon-76x76.png')}}">
<link rel="apple-touch-icon" sizes="114x114" href="{{asset('assets/favicons/apple-icon-114x114.png')}}">
<link rel="apple-touch-icon" sizes="120x120" href="{{asset('assets/favicons/apple-icon-120x120.png')}}">
<link rel="apple-touch-icon" sizes="144x144" href="{{asset('assets/favicons/apple-icon-144x144.png')}}">
<link rel="apple-touch-icon" sizes="152x152" href="{{asset('assets/favicons/apple-icon-152x152.png')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/favicons/apple-icon-180x180.png')}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{asset('assets/favicons/android-icon-192x192.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/favicons/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset('assets/favicons/favicon-96x96.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/favicons/favicon-16x16.png')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/shutter-modal.css')}}">
<link rel="manifest" href="{{asset('assets/favicons/manifest.json')}}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{asset('assets/favicons/ms-icon-144x144.png')}}">
<meta name="theme-color" content="#ffffff">
<meta name="_token" content="{{csrf_token()}}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
{{-- <link rel="stylesheet" type="text/css" href='{{asset("assets/css/all.css")}}'> --}}
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/themify-icons.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/font-awesome-4.7.0/css/font-awesome.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/magnific-popup.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.carousel.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.theme.default.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/animate.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/bootstrap.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/style-MF.css")}}'>
and as I said this was ok and I didnt touch it in any way !
If you are using root to update your code, change owner of your files to website user. You can use chown command to change owner and -R argument for applying recursively.
chown -R groupname:username *
Note: In most of time, groupname and username are same!
I'm new to Spring Boot and my problem is that I have Spring Boot project and I am intending to view my HTML pages with Thymeleaf but Spring can't resolve my JavaScript and CSS files.
Full picture of my IDE:
Those are my Thymeleaf configurations
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true
This is my HTML page head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>404 Page</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<meta name="viewport" content="width=device-width"/>
<!-- Css Files Start -->
<link href="/src/main/resources/static/css/style.css" rel="stylesheet" type="text/css" media="screen"/><!-- All css -->
<link href="/src/main/resources/static/css/bs.css" rel="stylesheet" type="text/css" media="screen"/><!-- Bootstrap Css -->
<link rel="stylesheet" type="text/css" href="/src/main/resources/static/css/main-slider.css" media="screen"/><!-- Main Slider Css -->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="/static/css/customIE.css" media="screen"/><![endif]-->
<link href="/src/main/resources/static/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome Css -->
<link href="/src/main/resources/static/css/font-awesome-ie7.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome iE7 Css -->
<noscript>
<link rel="stylesheet" type="text/css" href="/static/css/noJS.css"/>
</noscript>
<!-- Css Files End -->
</head>
You should use relative path to your JavaScript and CSS files:
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="screen"/>
or you can use th:href Thymeleaf's tag as well:
<link th:href="#{css/style.css}" href="../../static/css/style.css"
rel="stylesheet" type="text/css" media="screen"/>
I have found that Spring automatically searches for: /resources/.
So what I did was removed all the pre-directories by using find all.
So, in my case what used to be for example: /static/css/style.css & /templates/index.html
became: /css/style.css & /index.html
Now the question remains how does Spring boot know what folder to look in without you defining it: Spring looks at the extension. When spring boot sees .html, it looks for it in a folder called /templates.
I'm new in laravel, I'm creating the layout structure, I would like know how can transform to blade this section:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
with css and scripts I know how do it, but this have sizes and other attributes.
Thank you for your help!
You don't need to change this section of code, because It's not needed
I like clean code and I'm sure most developers do. I am coming across an issue where my Meta tags are all appearing on ONE line all together and not on separate lines.
I have a file called "client.master" and here is code for the header:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" />
<link rel="apple-touch-startup-image" href="/images/home-startup.png" />
<link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" />
<link href="/css/design.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="headContent" runat="server">
</asp:ContentPlaceHolder>
</head>
That looks very clean and nice. However, when I view the source of the page, the output shows the <meta> tags and the <link> tags all on one line. The script tags are not.
Here is the output of my code:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="default" /><meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" /><link rel="apple-touch-startup-image" href="/images/home-startup.png" /><link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" /><link href="/css/design.css" type="text/css" rel="stylesheet" />
<title>
Login
</title></head>
Notice the <meta> and <link> tags are both on a single line AND the <title> tag has line breaks.
Here is the HTML for the default.aspx page for the Title:
<asp:Content ID="title" runat="server" ContentPlaceHolderID="title">
Login
</asp:Content>
My assumption is because the <meta> tags and <link> tags are self enclosed and the <script> tags end with </script>.
Is the only way to resolve this issue to close my <meta> tags with </meta>. Which way is to be considered the standard when closing meta and link tags? or script tags?
Thanks in advance for your help!
If you really want to follow the spec, link and meta are void elements, they can't have a closing tag, if your DOCTYPE is HTML5, you can use the selfclosing tag <meta ..../> but the default way would be to use it only as a start tag, that is a correct conforming use as empty elements don't need an end tag (void ones, as I said, can't have it).
Script is not a void element, but is an empty one, so you can use only the start tag, the self-closing tag or both start and end tags.
Note that for an element to have a content model of type empty really means it may be empty, not that it should; that would probably be what it is called void.
As to why the asp parser does that to your metas, I can't think of a reason. I understand your preference for clean code, but if it is of any help, try to think that at least that bug contributes to a filesize decrease :o)
Bear in mind that all of this applies to HTML5, XHTML treats void and empty models differently.