I'm at a loss for how to get this to work. I've tried just about every trick in the book and nothing seems to work. I've tried clearing my cache, using multiple web browsers, and multiple computers.
Here's the code I'm using. I can browse to this image via the URL just fine.
<head>
<title>Security</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" type="image/x-icon">
<link rel="icon" href="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" type="image/x-icon">
</head>
The icon doesn't appear when I load the site and the Console tab of the Developer Tools isn't giving any error indications.
I've tested on:
Chrome: Version 61.0.3163.100 (Official Build) (64-bit)
Firefox: Version 56.0 (64-bit)
IE: Version 11.0.9600.18793
I also tried generating my own using this website: https://www.favicon-generator.org/
Anyone have any ideas?
Here's the steps I followed:
Removed every trace of my previous attempts.
Went to https://www.favicon-generator.org/ and generated a new set of images.
Put the images in the following location /Images/Favicon
Copied the code provided by https://www.favicon-generator.org/ and placed that in my html section.
Completely cleared out everything from my Chrome history.
Closed and reopened Chrome.
Loaded the website again and it was there finally.
Related
First, I should mention that I am hosting on a .vip website. My code is simple:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="icon" href="img/Pic.ico" type="image/x-icon">
</head>
This works when I host locally through MAMP, but neither the title nor the favicon are showing up on Chrome etc. on any desktop I try.
To add to the mystery (which may be related) none of my extensions are appearing on the URL. For example, if I have a link to a page "dj_page.html", whereas on MAMP it does show [SITE]/dj_page.html, and on my website I would like it to show
[SITE].vip/dj_page.html
Instead it just remains at
[SITE].vip
I have cleared the cache on Safari, tried several different computers, but not even the title is showing up properly. Also, does not work if I change the code to, for example,
<link rel="icon" type="image/png" href="http://otranscribe.com/favicon.png">
You can use this:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
SOLUTION: I was hosting on Heroku and nothing was working. Switched over to Azure and everything worked no problems...
Ok so recently I started building a website and I realized that I needed a favicon so I made one put it in a favicon generator got it out and I have tried linking to it, and just plain inserting the image in the head but I can't seem to get it to work. It is a 16x16 photo saved as favicon.ico It still won't show up? it's in the same folder as my html along with the rest of the website do I need to put "http://favicon.com" instead I have tried using the debugger and network inspector but it won't acknowledge that's it there could it be the photo itself because I made it in illustrator then made it a jpg in photoshop?
Here's my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="resume, mason britt, portfolio">
<link rel="shortcut icon" href="favicon.ico">
</head>
It would seem like the standard apple-touch tags aren't working correctly for me in iOS8.
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="icon-180.png">
Is there a new format to get this functionality to work? It looks like Apple hasn't yet updated their docs for iOS 8.
I was having issues getting these to work, and the reason was that because I was using a development SSL certificate, it wasn't fetching the images properly.
When on a machine with a proper SSL certificate, or by using absolute paths with a non-secure protocol (http://), I was able to fix this issue.
Moving the touch-icon link right after fixed it for me.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="icon-180.png">
I got an empty website up and running online. Basic html5 page with a style link and a script link. It looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taco Bell at midnight</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
The src's are accurate, I have a folder in the same directory as the html page with the name css and js. When I try to visit them, it shows them as blank. However, when I drag the files out to the same directory as the parent, and update the href, it shows them with the content. Does anyone have an idea as to why this is happening?
It seems relevant to add I just purchased the domain today from GoDaddy, and am using x10hosting for free hosting.
UPDATE: The styles.css still appears in my home directory (in chrome, not cpanel) after being moved, and ctrl+f5'ing, and it now also appears in the folder css/styles.css as well???
UPDATE2: Now it appears as though the files are just updating really slowly? I see the changes in codeanywhere/cpanel immediately, but chrome takes like half an hour to get the changes, regardless of clearing my history/cache and ctrl+f5'ing.
x10hosting (free version, I haven't tested paid version) cache is really bad, this seems to be a server issue, sometimes it keeps showing files that you deleted hours ago, sometimes it won't show files that didn't exist beforem, you might need to wait for hours.
I've tried for hours to get the icon from the Chrome function "add to homescreen" (Zum Startbildschirm hinzufügen) but it appears only the icon for the normal favorits.
I use an IIS as webserver, and write the html exakt as in the Chrome Doku.
<title>MangoApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="http://tatwebapp196x196.png">
I've tried with different paths like relative and absolut but always the same effect: no icon.
Tested on Nexus and Xcover2 with the newest Chrome browser Versions 36.0.1985.128 and 35.0 1916.141
What is wrong here, can anybody help ?
Thank you
Michaela
Since I can't comment yet (I should use this more!)...
I've tested, with an application I'm currently developing, on:
Nexus 10 (Chrome 36.) ~ favicon used
SG SV (Chrome 36.) ~ favicon used
SG SV (Chrome Beta 37.) ~ favicon used
and finally...
SG SIII (Chrome 35.0.1916.141 (for some reason)) ~ 196x196 icon used! (this is the same as a version you tested this on, though, so for reference, it's running 4.3 still)
I guess this should provide some more validity to Michael's point, so I guess I'll file a bug report and hope for an update soon. Regardless, I'm strangely glad to see there's actually a problem.
A link to my app, which is actually a game (the most stable thing should be the icons...) here.
It would be interesting to know if this is working in Chrome 37 now.
We are using the same meta tags with a slightly different format for the icon, adding the "type" attribute, that may matter. This works in Android 4.0+ with Chrome 37, as well as iOS.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
<link rel="apple-touch-icon" href="images/AppIcon.png">
<link rel="apple-touch-startup-image" href="http://ourURL/images/iPhoneStartup.png">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />