I have the following code:
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>EPDM Polymers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
However, The favicon is not showing up on www.epdmpolymers.com I have the favicon.ico file in my images folder. Any ideas?
You have 2 links for favicon.ico, try removing the first link from your code. I guess it would work for you.
Or once again cross-check the path of the image, try using relative path to the file.
For example: If your image is in root/images folder, so use (/images/favicon.ico)
One of my favorite debugging methods is to download and use a favicon.ico file from a working site like http://www.google.com/favicon.ico
If it works then the issue will be because of your file size or
format.
If it does not work then the issue will be either with the
html tag.
To rule out file permission issue try accessing your favicon file
directly using its url through the browser address bar.
Related
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
I did "ionic start myApp sidemenu" to start a sidemenu app. It starts with the "Playlists" page with 6 items. I click on one of those, say "Raggae" and it takes me to the "Playlist" page. At this point, the sidemenu does not open when I sweep from left to right.
In the following plnkr example from another StackOverflow question, the sidemenu does open after I nagivate to the "Playlist" page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
http://plnkr.co/edit/0RXSDB?p=preview
Is this my local environment problem or something wrong with the sidemenu template code?
With a brute force method, I found out the ionic.bundle.js come with the "ionic start myApp sidemenu" is causing the problem. If I inlcude the ionic 1.0.0-beta.1 version as in the plnkr example, the problem is gone. But the beta version is causing other different behavior in navigation. Hopefully ionic gets better.
I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.
This is the code I am using:
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
But it is not working - can anyone please assist?
I've saved the file favicon.ico on the same level as my html file (on a subdirectory).
Many thanks
With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device.
You should have a look at
http://realfavicongenerator.net/
to automate a large part of this work, and probably at https://github.com/audreyr/favicon-cheat-sheet to understand how it works (even if this latter resource hasn't been updated in a loooong time).
One complete solution requires to add to you header the following (with the corresponding pictures and files, of course) :
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
In June 2016, RealFaviconGenerator claimed that the following 5 lines of code were supporting as many devices as the previous 18 lines:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
I use this on my site and it works great.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
There is a very simple method to set a favicon, which had been around for a long time AFAIK.
Place the favicon.ico file in the default location.
i.e
http://www.yoursite.com/favicon.ico
This works in almost every browser without a <link> tag.
However, this works only if it is an *.ico file. PNGs and other formats still have to be linked with a <link> tag
Below given some information about fav Icon
What Is FavIcon?
FavIcon is nothing but small image which appears top left along with the application address bar title.Standard size specification for favicon.ico is 16 by 16 pixel. Please see below attached figure.
How It Works ?
Usually we add our FavIcon.ico image in the route solution folder and automatically application picks it while running. But most of the time we might have to use below both link reference.
<link rel="icon" href="favicon.ico" type="image/ico"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Some browser expect one (rel="icon") Some other browser expect other rel="shortcut icon"
Type=”image/x-icon” OR Type=”image/ico”: once expect exact ico image and one expect any image even formatted from .jpg or .pn ..etc.
We have to use above two tags to the common pages like – Master page , Main frame which is getting used in all the pages
you could take a look at the w3 how to, i think you will find it helpful
your link tag attribute should be rel="icon"
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>
rel="shortcut icon" should be rel="icon"
Source: W3C
From experience of my favicon.ico not appearing, I am sharing my experience. You can't get it to show until you put your website on a host, therefore, try put it on a localhost using XAMPP - http://www.apachefriends.org/en/xampp.html. This is how the favicon appears and like others recommended, change:
rel="shortcut icon"
to
rel="icon"
Also this way .png favicons can be used for slickness.
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
In my site, I use this:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
To simplify your life, use this favicons generator http://realfavicongenerator.net
This method is recommended
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
Try put this in the head of the document:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
I use this https://realfavicongenerator.net/ to generate all the possible favicons scenarios and it is free.
I have a mobile webapp that I am developing using jquery mobile. I am prompting the users that they can use the add to homescreen function to load the webapp from the desktop. When I test the functionality of the splash screen on my iPhone 3GS, the png file which I wish to load does not load with the splash screen, but rather, a "screen shot" of the site with a white-space at the top where it appears the address bar used to be.
Here is my code
<html><head>
<title>Page Title</title>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/mydashboard.min.css" />
<link rel="stylesheet" href="css/add2home.css">
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />
<!-- ***Here is my code for splash screen*** -->
<link rel="apple-touch-startup-image" href="Default.png" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-land.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-port.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ***My JS files are included under this and the closing of the head tag*** -->
I have tried a 320x460 and a 320x480 png file where the Default.png is. Neither have had any success. From what I've read, I think I'm doing this right, but I could be wrong. I'm basing my opinion on https://developer.apple.com/library/archive/qa/qa1588/_index.html
and
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
So my question is this, has anyone else seen this? If so, what was the cause and what did you do to resolve the issue if you did resolve the issue? If you haven't seen this particular issue, is there anything you might be able to suggest based on my code above?
The Default.png file MUST be 320x460px.
Try removing the launcher from the home screen and re-adding it from Safari.
That is what I had to do to get mine to work.
I am wondering what am i missing here
this is the html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../../nImg/favicon.ico" type="image/x-icon" />
<title>Gran Melia</title>
<meta name="Description" content="Gran Meliá"/>
<meta name="Keywords" content="Gran Melia"/>
<meta name="Language" content="es"/>
<meta name="Robots" content="index,follow"/>
<meta name="og:description" content="red" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<!--<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
<!--<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> -->
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--<link href="css/media.css" rel="stylesheet" type="text/css" />-->
<!-- <link href="http://keepyourlinks.com/css/ui.css" rel="stylesheet" type="text/css" /> -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- Fondo de galería -->
<script src="js/graphics.js" type="text/javascript"></script>
<script src='js/iscroll.js' type='text/javascript'></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
/*Fotos de fondo*/
var photos = [
"http://www.bancotravel.com/images/hoteles/M/MELIAPALACIOISORAALCALA/foto-hotel-23.jpg",
"http://www.bancotravel.com/images/hoteles/M/MELIAPALACIOISORAALCALA/foto-hotel-24.jpg",
"http://larivieramaya.es/wp-content/uploads/2011/04/sol-melia-prepara-el-lanzamiento-en-mexico-de-la-marca-paradisus-con-dos-hoteles-en-playa-del-carmen.jpg"
];
</script>
</head>
for what i can guess, i am commenting the lines (device-width) that should prevent this to happen so I am kind of lost...
In case this code is not enough, the testing website is http://toniweb.us/gm
-EDIT-
Won't let user scale or scroll even if:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=1, minimum-scale=0.5, maximum-scale=2.0">
I opt for this as the problem. If you have 100% height of body and html iphone is irritated.
html, body {
height: 100%;
}
<meta name="viewport" content="width=device-width">
That's the problem
<meta name="viewport" content="width=1024">
Should solve it
-edit-
Whoops, that site isn't 1024 pixels. Try experimenting with the value - maybe 320 (iPhone width)
-edit2-
Why would you want to let iPhone users scale the website anyway? If you design it for the right size, it's only annoying if they can scale...