My Favicon is not showing up in Brave (HTML) - html

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digvijay Singh</title>
<link rel="favicon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
I tried adding favicons present on my folder but it is not showing up.

Try clearing Browser cache and do check that the icon is less than 100kb(as it may be the cause that the icon isn't loading). You can check Security settings or disable any extensions that might be blocking it to load.

Related

css style are not getting applied in github when deployed

I am trying to deploy a small html and css project on github but css styles are not getting applied after deployment. I am very new to github and I don't know what is the probelem. Any help will be appreciated.
HERE IS THE MY REPO OF MY PROJECT:https://github.com/Subhodeep014/Frontend_Mentor_testimonial
In your header, you used a double single quote instead of one.
the wrong code:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials</title>
<link rel=''stylesheet'' href="style.css">
</head>
the correct one:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials</title>
<link rel='stylesheet' href="style.css">
</head>
I Check the link and pages load Properly with cssView Link

index.html file doesn't show style when directly accessed through browser

So, I've been noticing when I want to check my designs directly by clicking on the index.html file, it just won't show the style:
But if I check it out through VS Code then it will show up
This is my html head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BMI careers</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" type="image/png" href="/img/logo.png">
</head>
Try taking the first "/" away from the roots.
what i mean is, instead of this:
<link rel="stylesheet" href="/css/style.css">
write this:
<link rel="stylesheet" href="css/style.css">
in all of them.
You have to make the paths relative paths, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BMI careers</title>
<!-- just add a '.' in front of the path -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/png" href="./img/logo.png">
</head>
This is because the / means the root in your computer and ./ means current folder in which this file exist.
It works in vs code because you are running it on a local server and the root (the '/') is the root of the server not the root of your computer.
Try using ./css/style.css and ./css/bootstrap.min.css rather than just a /

How do I get my Favicon to show in WordPress custom theme?

I am trying to get a favicon to show in WordPress header and its just not working for me - what would be the problem do you think?
I am using Twig/Timber for dev.
<link rel="shortcut icon" type="image/x-icon" href="{{options.header.favicon.url | default(site.theme.link ~ '/images/favicon.ico')}}"/>
Everything inspects just fine:
<link rel="stylesheet" href="http://protoolsite.local/wp-content/themes/protool-theme/style.css" type="text/css" media="screen"/>
<link rel="shortcut icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="author" href="http://protoolsite.local/wp-content/themes/protool-theme/humans.txt"/>
When I check this link it pulls up no problems at all: http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico it just keeps showing the wordpress "W" favicon.
Pretty sure Wordpress requires "icon" too.
<link rel="icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>
It'll be easier to go to appearance > customise > site identity in Wordpress though.

Embed SVG icon into html

I need embed my SVG icon directly into the html file, not as a link to an SVG file.
I have tried to add <link>SVG file contents</link> to the html but it didn't work.
My html's <head>:
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<meta name="theme-color" content="#568342"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="My App"/>
<link rel="apple-touch-icon" href="images/icon_apple.png"/>
<link rel="icon" href="images/icon.png"/>
<title>My App</title>
</head>
You can use a data URL as a value for the href attribute of the <link>. Like enxaneta remarked, the compatibility data strongly suggest that you first convert the SVG to a PNG (easiest is exporting it from a vector grafics UI). After that you would convert it to a data url, for example with this online tool.
If you insist on using the SVG directly, this online utility is better suited for SVGs, you can drop in the source text.
Your final result looks like this:
<link rel="icon" href="data:image/png;base64,...">
or
<link rel="icon" href="data:image/svg+xml,...">

Html's title cannot be refreshed in SpringBoot project

I'm working with a SpringBoot project. And i want to change the html's . But it's not working for me, still show the default value Title. And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/favicon.ico" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
But i found that if i just run this html file alone, the title will show correct。
Is there cache in SpringBoot?
This problem is caused by JRebel. I got the correct result without JRebel.