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.
Related
Can you tell me what is the difference of creating the image in these two codes?
<link href="img/favicon.ico" rel="icon" type="image/png">
versus
initiating using the simple <img /> tag
I'm just trying to understand what is the difference
The <img> tag embeds an inline image in your document. The <link> tag tells the browser the entire document is associated with an external resource. In this case, your document is associated with img/favicon.ico and the relationship is "icon" -- it's the icon for the document.
<link href="img/favicon.ico" rel="icon" type="image/png">
This code is for favicon. Favicon is the image top of your browser. You can create favicons using "https://www.favicon-generator.org" this kind of website. And also you can create favicons for different devices. It will look like:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
In the code above; "apple-touch-icon" is for ios devices to set favicon in safari and the images is going to be used for app icons also. "icon" for android and going to be used for chrome. "msapplication-TileImage" is for edge in windows. "manifest" is to define path for android. "theme-color" is just the app color if you enable PWA.
Click here for template page code
Click here for index page code
The favicon displays on the index page , the same code is on the template page but doesn't display the favicon(and the directory is declared ../recources) I've tried many articles and worked with a colleague but still can't find the problem.
Thanks for your time,
Ayaan
Template section:
<!DOCTYPE html>
<html >
<head>
<div class="background-test"> </div>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saturn Studios offers a wide range of website templates!">
<link rel="apple-touch-icon" sizes="57x57" href="../recources/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../recources/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../recources/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../recources/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../recources/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../recources/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../recources/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../recources/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../recources/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../recources/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../recources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../recources/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../recources/favicons/favicon-16x16.png">
<link rel="manifest" href="../recources/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../recources/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../recources/styles/style.css">
<link rel="stylesheet" type="text/css" href="../recources/styles/queries.css">
<link rel="stylesheet" type="text/css" href="../recources/styles/grid.css">
<title>Website Templates</title>
</head>
</html>
Index (this one works)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saturn Studios is here to take your website idea to the final frontier.">
<link rel="apple-touch-icon" sizes="57x57" href="recources/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="recources/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="recources/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="recources/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="recources/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="recources/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="recources/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="recources/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="recources/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="recources/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="recources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="recources/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="recources/favicons/favicon-16x16.png">
<link rel="manifest" href="recources/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="recources/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="recources/styles/style.css">
<link rel="stylesheet" type="text/css" href="recources/styles/queries.css">
<link rel="stylesheet" type="text/css" href="recources/styles/grid.css">
<title>Saturn Studios Official</title>
</head>
Try using ./resources/favicons/ms-icon-144x144.png as path.
Added favicon files to the github page
and pasted the following code below . It's not working though! I'm on chrome. What could be the problem?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<link href="fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; rel="stylesheet" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Try to reset cookies in your browser (in Chrome just ctrl+shift+r)
Check in developer console if there is no 404 errors and icons coming through.
Like all you need to have:
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="apple-icon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="apple-icon-16x16.png">
Your paths in the href attribute are wrong. You are telling the browser they are in the root-directory of your project (which in this case, is the first thing that comes up when you open the page in github, your screenshot as reference)
You have a folder named Favicon.ico (which I would change into something like icons, as .ico is usually associated with a file)
So, in your HTML you have to adjust the paths, so the browser knows in which directory these icons are, e.g.:
<link rel="icon" type="image/png" sizes="32x32" href="/Favicon.ico/favicon-32x32.png">
When I try my website on the W3C Validator, I have this error:
Start tag head seen but an element of the same type was already open.
I tried many things like: re-encode in UTF-8 without BOM, change the syntax, put in and out differents meta but it doesnt resolve my problem.
Here is my code:
<?php if($_SERVER['REQUEST_URI'] == '/index.php') header('Location:/')?>
<!DOCTYPE html>
<html lang="fr">
<!-- Begin Cookie Consent plugin -->
<script type="text/javascript">
window.cookieconsent_options = {"message":"En poursuivant votre navigation sur ce site, vous acceptez lβutilisation de cookies pour rΓ©aliser des statistiques de visites","dismiss":"Accepter","learnMore":"Plus d'infos","link":"http://must-assurances.com/mentions-legales.php","theme":"light-bottom"};
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>
<head>
<meta charset="UTF-8">
<title>MUST Assurances</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Site internet de la SAS MUST"/>
<meta name="keywords" content="assurance, nautique, courtier"/>
<meta name="author" content="MUST Assurances"/>
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="img/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="img/favicon/manifest.json">
<link rel="shortcut icon" href="img/favicon/favicon.ico">
<meta name="msapplication-TileImage" content="img/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="img/favicon/browserconfig.xml">
<link rel="stylesheet" href="css/landio.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic%7CLato:400,100,100italic,300italic,400italic,300,700italic,900,900italic,700'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body class="animated fadeIn"></body>
Do you have any ideas?
The start tag for the <head> element is optional. A <script> element cannot be a child element of the <html> element.
Consequently, <script type="text/javascript"> implies the start of the <head> element so when you explicitly type <head> you are trying to open a <head> instead another <head> which is not allowed.
Either:
Move <head> to before the <script type="text/javascript"> or
Remove the explicit <head> start tag entirely.
script tag should be inside head or body tag
I'm trying to create a website but have a problem with favicon.
Site: http://apelsinblog.ml
Report: http://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fapelsinblog.ml#.Vtx2emCLTIU
I want favicons to work correctly for mobile and Win8/10 platforms, but favicons for these platforms do not work, as you can see from the screenshot.
Please look through HTML. Thank you very much.
Fragment of <head> with favicons:
<link rel="apple-touch-icon" sizes="57x57" href="/fi/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/fi/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/fi/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/fi/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/fi/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/fi/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/fi/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/fi/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/fi/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/fi/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/fi/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/fi/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/fi/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/fi/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/fi/manifest.json">
<link rel="mask-icon" href="/fi/safari-pinned-tab.svg" color="#fc9700">
<meta name="apple-mobile-web-app-title" content="ΠΠΏΠ΅Π»ΡΡΠΈΠ½ β ΡΠ²Π΅ΠΆΠΈΠΉ ΡΠ°ΠΉΡ">
<meta name="application-name" content="ΠΠΏΠ΅Π»ΡΡΠΈΠ½ β ΡΠ²Π΅ΠΆΠΈΠΉ ΡΠ°ΠΉΡ">
<meta name="msapplication-TileColor" content="#fc9700">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#fc9700">
Sorry for offtopic. Corrected the question to avoid it.
What is the problem? the favicon is present favicon screenshot
If you don't see the favicon, sometimes only you need to close your browser and open it again or clear your cache.