I can't find the problem, my favicon is not working.
HTML
<head>
<title>SuomiFTB</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/text.css">
<link rel="shortcut icon" href="http://suomiservut.arkku.net/Finland-icon.ico">
</head>
Related
I can't get my CSS to be rendered locally. It was up before and I'm wondering if it is the order in which it appears in the head tag or if I am simply using the wrong path.
I've tried changing the order and different file paths including:
<link rel="stylesheet" href="css/styles.css"> (this one I thought should work but doesn't).
<head>
<meta charset="utf-8">
<title>SoundOff</title>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Favicon -->
<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Poppins:300,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Montserrat:900|Ubuntu" rel="stylesheet">
<!-- <!All fonts-->
<link href="http://allfont.net/allfont.css?fonts=antonio-bold"
rel="stylesheet" type="text/css">
<!-- CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<link rel="canonical"
href="https://getbootstrap.com/docs/4.1/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
</head>
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.
I'm a newbie in web development just started learning!
after i finished my first portfolio i tried hosting it in "www.000webhost.com" everything is working fine but the title and the favicon aren't showing at all .
but launching the index.html in my browser it works so fine!
here is the head code :
<head>
<title>E-Sabri | Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/l.ico">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://a2.muscache.com/airbnb/static/libs_jquery_2x-4c61948b1a5fa686ed70f7b9bf4a18c9.js" type="text/javascript"></script>
<script src="https://use.typekit.net/iun0wqe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="css/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.js" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vollkorn+SC" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
I'm looking forward to your answers thanks for your help !
The website url is : www.Esabri.tk
TLD services (like TK domains) offer two ways of shorten URL,
Redirect
iFrame
You are using the iFrame method, change it to 'Redirect' in the URL settings.
SOLVED
After trying over and over i decided to not park my domain but to POINT IT and it worked so fine ! thanks everyone for your answers have a good day
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>
I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.