I need embed my SVG icon directly into the html file, not as a link to an SVG file.
I have tried to add <link>SVG file contents</link> to the html but it didn't work.
My html's <head>:
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<meta name="theme-color" content="#568342"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="My App"/>
<link rel="apple-touch-icon" href="images/icon_apple.png"/>
<link rel="icon" href="images/icon.png"/>
<title>My App</title>
</head>
You can use a data URL as a value for the href attribute of the <link>. Like enxaneta remarked, the compatibility data strongly suggest that you first convert the SVG to a PNG (easiest is exporting it from a vector grafics UI). After that you would convert it to a data url, for example with this online tool.
If you insist on using the SVG directly, this online utility is better suited for SVGs, you can drop in the source text.
Your final result looks like this:
<link rel="icon" href="data:image/png;base64,...">
or
<link rel="icon" href="data:image/svg+xml,...">
Related
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digvijay Singh</title>
<link rel="favicon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
I tried adding favicons present on my folder but it is not showing up.
Try clearing Browser cache and do check that the icon is less than 100kb(as it may be the cause that the icon isn't loading). You can check Security settings or disable any extensions that might be blocking it to load.
I'm working with a SpringBoot project. And i want to change the html's . But it's not working for me, still show the default value Title. And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/favicon.ico" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
But i found that if i just run this html file alone, the title will show correct。
Is there cache in SpringBoot?
This problem is caused by JRebel. I got the correct result without JRebel.
I'm creating a landing page for work using a html template, I've taken this template here (www.switchonbook.com) and am editing it for a different product.
Regardless of what I do the second CSS won't show. I have
-Tested the CSS and the HTML through testers online, no problems
-Tried changing the location of the files
-Compared the code to the original code of the landing page
Here is the code I am using for the new landing page;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700' rel='stylesheet'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch On: Your DIY Toolkit</title>
<meta name="description" content="Switch On: Your DIY Toolkit">
<link rel="shortcut icon" href="http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png" type="image/x-icon">
<link rel="icon" href="http://www.ripeandready.com/wordpress/wp-content/uploads/2015/03/favicon.png" type="image/x-icon">
<link href="http://switchonbook.com/css/styles.min.css" rel="stylesheet">
<link href="http://switchonbook.com/css/main.css" rel="stylesheet" >
</head>
<body>
Any help would be greatly appreciated!
There are a few errors in your code. For instance, here:
http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700
There should not be spaces after the ?. Similarly, there should not be a space here after the -:
http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png
Also, you do not have closing </body> and </html> tags.
I think having this class added to the html tag is causing this tag not to work as is supposed to.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I got it working as I said, basically if you want to use Jquery Mobile and the internet explorer "edge" meta-tag the best way to do it to make sure it will work is to send the headers through PHP and include the html file without headers, you can add styles and scripts in the body. Here is my code:
<?php
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>
Try this instead : <meta name="viewport" content="width=device-width, initial-scale=1">
Some examples I found online show that they put the second meta element after the view port.
<!DOCTYPE html>
<html>
<head>
<title>Starter page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
http://www.appliness.com/getting-started-with-html-mobile-application-development-using-jquery-mobile-requirejs-and-backbonejs/
http://www.1stwebdesigner.com/css/jquery-mobile-need-to-know/
Changing page meta: jquerymobile one page with different meta viewport settings
I have a header that looks like this on my ASP.NET MVC webpage :
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>MyTitle</title>
<meta content="Återanvänd på rätt vis" property="og:title">
<meta content="website" property="og:type">
<meta content="http://MyWebb.se/Post/Detail/392" property="og:url">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" property="og:image">
<meta content="Some info" property="og:description">
<meta content="MyWebb" property="og:site_name">
<meta content="Återanvänd på rätt vis" name="twitter:title">
<meta content="http://MyWebb.se/Post/Detail/392" name="twitter:url">
<meta content="Some more info." name="twitter:description">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="twitter:image">
<meta content="http://MyWebb.se/Content/Files/PostThumbnails/392.jpeg" name="description">
<meta content="keywords" name="keywords">
<link href="/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon">
<link href="/Content/Theme/MainTheme.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
And when checking it with this tool : https://developers.facebook.com/tools/debug it does fetch the image.
But when I paste the url in to the wallpost it will only fetch title and desciption, no image. If the thumb however is square the image load just fine.
Why is "not square" images working? Should I generate empty space on all my thumbs(transparent borders with png) so they get a square format? Or is there another solution?
Maybe its because I'm missing the end tag for the meta data? But then the test tool should not fine the data?
The problem was that the og:image was of to small format, after this was fixed it worked just fine without stating the size.
Try defining the image type, width and height as per the example on the Facebook Developer docs - https://developers.facebook.com/docs/web/tutorials/scrumptious/open-graph-object/
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="3523">
<meta property="og:image:height" content="2372">
See also this SO answer - New og:image size for Facebook share? - it sounds like there are minimum dimensions for the images.