I'm using this site to make a favicon https://realfavicongenerator.net , after i download the favicon and put it in root of my site, where do i put this?
<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">
what file exactly. Im using osclass
Put like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Oxygen - One Page HTML Template | Themeum</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link id="css-preset" href="css/presets/preset1.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<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">
</head>
<!--/head-->
<body>
</body>
</html>
Related
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">
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.
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.