<head>
<link rel="icon" href="c.ico"/>
<title>A title</title>
</head>
This will add an icon to the left of the title up in the title bar.
Can I add another?
Or change the positon of the icon to display to the right of the text?
<head>
<title>A title</title>
<link rel="icon" href="c.ico"/>
<link rel="icon" href="c.ico"/>
</head>
The above changes nothing, and I haven't found any answer for this, probably because nobody does this and this may be useless.
But I was still wondering.
Using CSS with this (like float:right or border-radius) didn't work at all and I couldn't find any thing useful in the reference for link.
The favicon is not actually part of the web page, it is just an image that the browser use to display your page title more friendly. How the image is displayed is up to the browser.
Related
Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
I've tried adding a tab icon to my webpage, I've looked at other pages, but couldn't get any answers why my icon wasn't working. I'm new to coding so please make your answers simple.
Here is my code:
<head>
<link rel="icon" type="image/x-icon" href=favicon.ico>
</head>
add the following inside the <head> tag
<link rel="icon" href="/path/to/favicon/favicon.ico">
and make sure that the favicon.ico is present in /path/to/favicon/
Below is a minimal example of the code that I am using for my website's favicon. It is showing up as a favicon in Safari 8.0's address bar, but it is not showing up in the favorites dropdown box that appears when you click on the address bar when it is added as a bookmark. Instead, the default compass icon appears. What do I need to add to or change in my HTML5 to make my icon show in the dropdown box?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
</head>
<body>
</body>
</html>
I figured out how to add a icon to the favourites dropdown box in Safari 8.0 by looking at other websites where the icon is showing up. I'm not sure why it works, but it works for me and the other websites that I looked at. Make sure to specify that the icon is a shortcut icon, the type is image/x-icon and the file is an ICO.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
</body>
</html>
Try a larger icon size (e.g., 144x144 px).
seems that when the link is placed outside of the < head > section, that the icon will show up for bookmarks, but will not work for home screen.
-hope this helps someone else
I have this code in html and css. the problem is that the background image doesn't show up. first I thought the problem is with the size of the image and I made it smaller. but it made no change. can anyone help spotting the problem?
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<style>
{background-image:url('background.png');}
</style>
</head>
<title>
Melika Barzegaran Hosseini - Home Page
</title>
</html>
Maybe change your CSS to:
body{background-image:url('background.png');}
At present you have no CSS selector in place to identify exactly 'what' to apply the background image to.
Failing that, ensure that the image is actually found at the location specified.