I just started learning HTML, and to practice, I was just messing with Sublime Text to make a test website. I added the code for favicons which I have shown below which worked for Chrome, but not Safari.
<!doctype html>
<html>
<head>
<title>My Website</title>
<link rel="apple-touch-icon" sizes="180x180" href="/Users/umairzubair/Documents/html/image/apple-touch-icon.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="/Users/umairzubair/Documents/html/image/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="16x16" href="/Users/umairzubair/Documents/html/image/favicon-16x16.png">
<link rel="manifest" href="/Users/umairzubair/Documents/html/image/site.webmanifest">
<link rel="mask-icon" href="/Users/umairzubair/Documents/html/image/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Please guide me on what I am doing wrong and how can I correct it. I would really appreciate it.
I guess the issue is with the file path you are using inside href tag.
It should be something like this:
/image/faviconname.png instead of the long one.
Related
I have generated favicon on realfavicongenerator.net, but the favicon is not displayed in Safari on iPhone 6S. I have cleared history and website data, but it doesn't help. Here is my HTML code:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/x-icon" href='/favicon.ico' />
<link rel="shortcut icon" type="image/x-icon" href='/favicon.ico' />
As you see, I added rel="icon" and rel"shortcut icon" and also precomposed favicon, but nothing helps. I have looked on the Internet and couldn't find a solution. Is there anything else I can do?
Full disclosure: RealFaviconGenerator's author speaking.
First, you should run the favicon checker against your site, to spot errors such as invalid URLs.
If the test is positive, you can be confident that your touch icon is configured correctly. You probably have a caching issue, even if you have cleared your browser cache. As a workaround, you can try with another device or wait for a few hours and retry.
I bought a template online, and edited some of the HTML. I use x10Hosting for free server and domain name. The website is deployed;
http://www.wizerwish.x10host.com
However, the CSS is not recognised or executed no matter what path I write in the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unishop | Universal E-Commerce Template
</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Unishop - Universal E-Commerce Template">
<meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Rokaux">
<!-- Mobile Specific Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon and Apple Icons-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="css/vendor.min.css">
<!-- THIS IS WHERE THE CSS FILES ARE -->
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.min.css">
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.css">
<!-- Modernizr-->
<script src="js/modernizr.min.js"></script>
</head>
That is the html. The CSS folder path is as follows, starting from the desktop;
template-1/dist/css/
NOTE: the template-1 folder is on the desktop.
I have even copied and pasted the CSS files in the same folder (dist) where the html and other file are. But it is still not working.
I accessed your css file and got it working by removing the css & js path. all files are in same path. so no need of path extension.
I have this code on every page of my website.
<link rel="icon" sizes="192x192" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" />
Yet when I go to my website on Chrome for Android and tap "Add to home screen" my icon never shows up in the dialog. My image is of the correct size and exists.
What is going on?
I have used this documentation from Google.
Update
My website is http://compesh.com
Look at the page source and see if I've made any mistakes.
It works in Firefox for Android but not Chrome for Android and Chrome for Windows. I see this in Firefox WebIDE
2nd Update
Firefox for Windows is not showing my favicon image in the tab. Instead it is showing the wrong image and scaling it down to 16x16 pixels, instead of using my 16x16 favicon I specified in my web page.
hey try this one just go to https://www.favicon-generator.org
and choose your file and click on create favicon.
Now Download the rar file and extract where your project file is and then copy below code
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
now refresh the browser or try in another browser
You have placed below div (maybe mistakenly)
<div style="display: none;">
tag right after
<meta name="viewport" content="width=610">
in your head tag, that's why browser is closing your head tag before that div and favicon not showing. Remove that div from your head and everything will be fine.
buddy you are using html 4, why don't you use html 5.
and in href="/" it's not necessary to give full path/link. in your code
just do some minor change. i hope it will help you.
i guess #sarvesh has explain you everything
<link rel="icon" type="image" href="assets/graphics/favicon.png" sizes="16x16">
Since you are using a png file as your high res icon, can you try adding the type attribute, like so:
<link rel="icon" type="image/png" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" sizes="192x192" />
This helps distinguish it as a png file and not a regular favicon.ico file.
Try this in your href :
http://compesh.com/assets/graphics/touch-icon-chrome.png?v=2
You see the "?v=2" for clearing cache directly
Try this:
<link href="https://compesh.com/assets/favigen/favicon-96x96.png" rel="icon" sizes="96x96" />
Works fine on my android phone.
I tested it on
http://helledussen.com/test
I looked into this as well, and a solution I found was to make 4 different sizes and link to them with rel="apple-touch-icon". It has been tested on iPhone, iPad, Android, and Blackberry:
<link rel="apple-touch-icon" sizes="57x57" href="../images/YourIconName57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../images/YourIconName.png" />
I'm not following all the latest webdev trends so I've a question about what other icons besides favicon.ico a modern website should provide?
My current HTML looks like this:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
My favicon.ico is 32x32 PNG file.
What other icons should I be providing for my new website? I guess there are icons for Android, OSX, Facebook (when you share your website?) and others.
Favicons in multiple sizes:
<link rel="icon" sizes="16x16" href="favicon.png">
<link rel="icon" sizes="32x32" href="favicon-l.png">
<link rel="icon" sizes="64x64" href="favicon-xl.png">
Note: 16x16 and 32x32 are the most common ones; other sizes are unlikely to be used by major browsers.
iOS icons:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Note 1: these are also used by Android.
Note 2: use rel="apple-touch-icon-precomposed" if you don't want iOS to apply the "glass-effect" and just show your image as-is.
Microsoft Windows 8.1 Tiles
<meta name="application-name" content="My Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/ms-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/ms-square.png"/>
<meta name="msapplication-wide310x150logo" content="/ms-wide.png"/>
<meta name="msapplication-square310x310logo" content="/ms-large.png"/>
Note: these are also used on Windows phones.
Webpage thumbnail (used by Facebook for example)
<meta property="og:image" content="http://example.com/preview-100x100.png" />
See also this great article.
I added a icon to a site I built but the problem is it doesn't appear on Google Chrome And Safari. And here's what I did:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="shortcut icon" type="icon/icon" href= Jo.ico />
<title>My site</title>
</head>
<body>
</body>
</html>
Well you haven't put speech marks on the href section. And also, you should give your content a more unique identifier, because text and html are keywords, so the browser may, hypothetically, misinterpret them.
Why don't you try this instead:
<link href="Jo.ico" rel="icon" type="image/x-icon">
Your browsers may also be caching the icon. Please make sure your browser cache is properly cleared.
Also, make sure the icon's path is correct ("Jo.ico" assumes the icon is in the same directory as the file containing the above line of HTML).
Method 1
HTML 4.01:
<link rel="icon" type="image/png" href="favicon.png">
XHTM 1.0:
<link rel="icon" type="image/png" href="favicon.png" />
Method 2
<link rel="shortcut icon" href="favicon.ico">
Apple Devices:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Method 3
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Methond 4 (no support at the moment)
HTML 5:
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
Save your icon to the root folder of your website with the name: favicon.ico