Continuing the discussion from No websites on 'How to make a favicon' have been working, and I need help coding one :
I’m trying to do this but need some help. I’m trying to put a google classroom logo (don’t question me) for my favicon. Anyone able to help?
Could you share a Repl link and/or a code snippet?
Hi, this is my replit link. I’ve used a website (I think real favicon generator) from the previous topic. https://replit.com/@techonedits/Gam-3-as-others-broke#index.html.
Here is my code:
Hi, I just found out how to do this. Here is my code for real this time:
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/favicon-16x16.png">
<link rel="manifest" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/site.webmanifest">
<link rel="mask-icon" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="<link rel="icon" href="mail.png" type="image/x-icon"/>/favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="<link rel="icon" href="mail.png" type="image/x-icon"/>/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<title>TUG dev version 0.0.1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<a href="http://www.yourpage.com">place holder</a>
</body>
</html>
That shouldn’t work (AFAIK), as you put the code for the link tags inside of the href parts of the outer layer of link tags.
Hi, that code was added there was added to use the favicon from a website. I want to get the favicon to work on the top bar of safari for iOS but it already works as an icon in frequently visited. I do want to change the favicon from ico to png or even better jpeg
Update: the only thing not working is the icon on my browser. I’m struggling to fix it. Is it a IOS safari block?
I got it working on chrome but not safari. Is there something wrong with this new line I added?
<link rel="shortcut icon" href="favicon.ico="image/x-icon">
That’s malformed HTML code.
Correct would be:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
I’ve done that, everything works now expect that when I’m on index.html when using the website it fails to show my favicon. On other pages it’s fine. It only happens on safari at the moment
If it works on all pages except the index, then it’s likely just a caching error. Can you try on a different device/clear the cache and see if it persists?
3 Likes
I’ll try to use another device and I’ll clear my cache right now. It only happens on safari so it’s likely my safari cache
1 Like
It is a caching error as it works on other iPads, so everything is working fine. Thanks mate!
Happy to help! Could you mark whichever reply here helped you the most as the solution so the topic can close?
1 Like
Done! Thank you so much! I can now develop my website!
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.