Ok so recently I started building a website and I realized that I needed a favicon so I made one put it in a favicon generator got it out and I have tried linking to it, and just plain inserting the image in the head but I can't seem to get it to work. It is a 16x16 photo saved as favicon.ico It still won't show up? it's in the same folder as my html along with the rest of the website do I need to put "http://favicon.com" instead I have tried using the debugger and network inspector but it won't acknowledge that's it there could it be the photo itself because I made it in illustrator then made it a jpg in photoshop?
Here's my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="resume, mason britt, portfolio">
<link rel="shortcut icon" href="favicon.ico">
</head>
Related
I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.
I am trying to put an icon next to my page title. I have read quite a few articles and similar questions on the internet but i still can't see my little icon up there next to the page title. I literally don't know what is wrong with my code.
I have the following directories among other: data/public, data/files, public (which includes all my css files), views (which includes all my ejs files). Inside the /views folder i have a few folders and a few files that are responsible for my viewing experience while using the web app i am building. Now in the /views/includes directory i have a file named head.ejs which contains all my head code i will use in pretty much every other ejs file. so i just have the head.ejs file and i can include it in every ejs file i want. The head.ejs file looks like that:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="shortcut icon" href="/data/public/boxTitle.jpg" type="image/jpg" /> -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css">
I expected to see the icon up there but still haven't seen it. I have tried to move my favicon.ico image around in different directories and play a bit around with the paths. the best for me is for the image to be in the /data/public/ directory. while the head.ejs is in the /views/includes/ directory. The image is 16x16, black and white. Tried with a jpg image, too. I am probably failing really hard cause it's seems pretty easy and straight forward but... Any help is appreciated! I will delete the post if the answer is totally obvious and the post is worthless.
Assuming your icon is in your public folder inside an images folder.
If you have defined your public folder as you mentioned, with something like this:
app.use(express.static(path.join(__dirname, 'public')));
then you can easily display your icon this way:
<link rel="icon" href="/images/your-icon" type="image/x-icon" />
First, I should mention that I am hosting on a .vip website. My code is simple:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="icon" href="img/Pic.ico" type="image/x-icon">
</head>
This works when I host locally through MAMP, but neither the title nor the favicon are showing up on Chrome etc. on any desktop I try.
To add to the mystery (which may be related) none of my extensions are appearing on the URL. For example, if I have a link to a page "dj_page.html", whereas on MAMP it does show [SITE]/dj_page.html, and on my website I would like it to show
[SITE].vip/dj_page.html
Instead it just remains at
[SITE].vip
I have cleared the cache on Safari, tried several different computers, but not even the title is showing up properly. Also, does not work if I change the code to, for example,
<link rel="icon" type="image/png" href="http://otranscribe.com/favicon.png">
You can use this:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
SOLUTION: I was hosting on Heroku and nothing was working. Switched over to Azure and everything worked no problems...
I can't figure this one out,so I just made a small web page and when i link it in skype/facebook I don't get the name of the page in skype/facebook but instead I get.
"Open classfields installation", I assume this is from a previous "web platform" that I tested in the same domain.
How do I change that? My <head> looks like this
<meta charset="utf-8">
<title>My website title</title>
<meta name="viewport" content="initial-scale=1">
<link href="images/small_icon.png" rel="icon">
<meta name="description" content="My description">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
First, be absolutely sure that you're sharing the right URL. I know it sounds dumb, but you should make sure that the page you expect is definitely there (and not being 302 redirected to, or in an iframe, or anything like that).
Once you've made sure of that, you can look at the page itself. From what you've written, it looks like you will probably need to add OpenGraph meta tags to help sites see the page details clearly, for example:
<meta property="og:title" content="Introducing our New Site">
<meta property="og:image" content="images/myimage.jpg">
<meta property="og:description" content="My amazing new site is amazing">
When that's done, you can ask Facebook to get the latest version (otherwise it will be a cached version) using their URL Linter:
https://developers.facebook.com/tools/debug/
You can also debug your OpenGraph tags to ensure it's picking them up, too.
I don't believe there's a way to force Skype to get a new version of the URL, but the OpenGraph meta tags may help it see what you want it to see.
try using below metadata
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
I have these meta tags in the <head> of my webpage, but when i try to save the page to my homepage, it doesn't show my icon or turn into a web app (it opens in safari automatically)
<link rel="apple-touch-icon" href="http://bithumor.co/bh-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
Here's the code to my entire page (if you would like to see it to help answer my question) - http://pastebin.com/y7DTJfdm