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/
Related
This question already has answers here:
Can't get stylesheet to work with ejs for node.js
(5 answers)
Closed 2 years ago.
(Beginner here...)
My CSS won't link to my HTML. I am using GOORM IDE, I have read other questions on this topic and tried the solutions from them but none seem to work (when I apply the CSS inline, it works perfectly), I have so far tried:
Moving the main.css to the same folder as the header.ejs file
Adding type="text/css"
Changing the href to:
main.css
/main.css
/stylesheets/main.css
/public/stylesheets/main.css
../stylesheets/main.css
None of which have worked. Any ideas? I want to keep the CSS in a separate folder if possible. I have included a screenshot of the file structure on GOORM also if that is useful.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
mmm I'm not sure really but I think your path based on the image should be
<link rel="stylesheet" href="stylesheets/main.css">
Yes, I also think, there should be the path to the .css-File.
for example, I called my css in the head like this:
<link rel="stylesheet" href="app/css/app.css" />
So you need to call your file:
<link rel="stylesheet" href="public/stylesheets/main.css" />
Btw: is the link to the fonts correct? Is this a valid repository?
Tested in VSCode, this works for me:
You've got your header.ejs in views/partials and your main.css in public/stylesheets.
This means your link has to move up two directories. Use:
<link rel="stylesheet" href="../../public/stylesheets/main.css>
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
<head>
<title><!--i want to add a picture into the title--></title>
</head>
plz help me guys I'm creating a website only using html. I want to know how to add a picture into the title which is shown in the browser
Title is used to display the page title as text.
You should use the balise below to display an icon named logo.png for example:
<link rel="icon" type="image/png" href="logo.png" />
You actually need to add a favicon to a website.
<link rel="icon">
Simply add the following code to the <head> element:
<link rel="icon" href="http://example.com/favicon.png">
What you're looking to add is actually a called a favicon. It is a tiny image you'd like to add next to the title of your website.
See this article for more info on favicons: https://www.abeautifulsite.net/what-are-favicons.
Some things to consider (taken from the article)
The most common sizes for favicons are:
32x32
48x48
64x64
-128x128
You can use a favicon generator to turn your image into the proper format and download it.
Insert the following code into your head after downloading your favicons and placing them in the directory of your html website.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Make sure you use an icon file with sizes as mentioned by #Joshua. Insert the following code.
<link rel="icon" href="....logo.ico?v=2" />
You will need to add ?v=2 query string to force a refresh. Otherwise you might have cache issues.
<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.
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
the head of my site starts with this but the favicon still won't show up inside of the title bar on any of my pages.
if you want to check for yourself the site is http://viewwit.com/ (I know it's bad, I'm making it just for fun).
I can't figure out why it isn't working. Any help would be awesome.
Try these
<meta charset="utf-8">
<link rel="shortcut icon" href="http://viewwit.com/image/favicon.ico" />
Take a look at the meta charset
As an easy fix, you can place your favicon within the root directory (same place as index.html). This is the default location which a browser will look for when searching for a favicon.