I'm doing an assignment for class, and we were tasked to make a webpage. All went well with creating the page, but I'm struggling to get the icon on my browser tab.
He instructed us to get the icon from one of our folders
This is from his directions
"Note in order to show your icon, you insert this line in your html head section"
<link rel="shortcut icon" href="images/favicon.ico" type="favicon/ico" />
"Assuming that your company icon is in the folder images"
I've tried many variations of that, but it won't work.
Mine is called favicon(1).ico
Here's one of my attempts
<link rel="shortcut icon" href="/favicon(1).ico" type="image/x-icon" />
Here's another.
<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />
I have a folder on my Desktop called "Question 1" and within that folder I have my HTML file for this assignent and another folder called "images". In the "images" file I have the "favicon(1).ico icon.
Is there a way I can take that icon from my folder and place it in my code?
This is the Snippet that I use whenever I need to configure a favicon:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
This should work just fine.
You need to use .png in FF, Chrome and Opera and support them with 2 resolutions, for different devices and screen resolutions.
IE needs the .ico Image and needs the rel to be "icon" and "shortcus icon", don't ask me why, IE is always a bit of a wierdo as we all know :D
Try:
<link rel="shortcut icon" href="favicon(1).ico">
or this (for Mozilla)
<link href="favicon(1).png" rel="icon" type="image/png" />
It can be .png or .ico
Related
I am using a third-party template in Blogger and favicon option not showing in Layout. I have used this code but not working
]]></b:skin>
<link href='https://live.staticflickr.com/65535/49497319651_bd2f1deb42_m.jpg' rel='icon' type='image/png'/>
you can make or design a 16*16 pixel image in a .png format then use one of the following snippets for adding the favicon itself:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
This is the code i used to declared which image to use as a page icon and which one to use as a desktop icon. Am i missing something?
<link rel="shortcut icon" type="image/x-icon" href="/src/images/desktop_favicon.ico" />
<link rel="icon" type="image/png" href="/src/images/page_favicon.png">
Is it even possible to have a icon for the webpage and another for desktop?
I have a html site.The issue is favicon not working in chrome but it worked well in Firefox & Safari.
Anyone can help me to get rid of this issue?
<link rel="shortcut icon" type="images/ico"
href="http://www.example.com/images/favicon.ico" />
I was having exactly the same problem. Then I tried refreshing the page by doing Ctrl + Shift+ R. It worked!
Have a look at this question: Favicon not showing up in Google Chrome
1) Clear your cache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser, lets say safari. How did you import the favicon?
2) How you should add it:
Normal favicon:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
PNG/GIF favicon:
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />
3) Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver).
Source: https://stackoverflow.com/a/16375622/1581725
<link rel = "shortcut icon" href = "test_image.ico" type = "image/x-icon" />
Also, if your icon is too small, double the size. That worked for me when I had this issue.
I have the html:
<link rel="shortcut icon" href="/images/favicon_muse_me.ico">
on my website Muse Me (http://www.musememobile.com)
The favicon won't show up if I open it with Chrome. It shows up in other Browsers.
The favicon showed up before in Chrome but then I changed it.
What should I do to make it show up in Chrome?
Add the ICO file to the root directory as 'favicon.ico'.
Some browsers disregard the favicon metatag, and just look for /favicon.ico.
Chrome does not support animated favicons, and it doesn't look like anyone is interested in implementing it.
Original bug report: http://code.google.com/p/chromium/issues/detail?id=19731
Latest duplicate: http://code.google.com/p/chromium/issues/detail?id=130062
What about if you declare a "type" for your link? Also, you can try a rel of simply "icon" in addition.
Try this:
<link rel="icon" href="/images/favicon_muse_me.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/images/favicon_muse_me.ico" type="image/x-icon" />
You could also try appending the domain to the image src as well:
<link rel="icon" href="http://www.musememobile.com/images/favicon_muse_me.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.musememobile.com/images/favicon_muse_me.ico" type="image/x-icon" />
UPDATE
You could also try using a png for your favicon (obviously will need to have a png version to do this). This is the approach I take with my own site and it looks fine in Chrome:
<link rel="icon" type="image/png" href="/images/favicon_muse_me.png" />
Make sure it's in <head> tag. It's kind of...'meta' info for the page.
<head>
<link href="//domain.com/favicon.png" rel="icon" type="image/x-icon">
</head>
I tried other options but this worked in Chrome for me
What I have been using is the URI, witch you can find out at https://websemantics.uk/tools/image-to-data-uri-converter and just put it in the atrabute href.
For example this is a valid URI a favicon
<link rel="icon" href="data:image/png;base64,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">
Are there any modern browsers that won't detect the favicon.ico automatically? Is there any reason to add the link tag for favicon.ico?
<link rel="shortcut icon" href="/favicon.ico">
My guess is that it's only necessary to include it in the HTML document if you decide to go with GIF or PNG...
To choose a different location or file type (e.g. PNG or SVG) for the favicon:
One reason can be that you want to have the icon in a specific location, perhaps in the images folder or something alike. For example:
<link rel="icon" href="_/img/favicon.png">
This diferent location may even be a CDN, just like SO seems to do with <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.
To learn more about using other file types like PNG check out this question.
For cache busting purposes:
Add a query string to the path for cache-busting purposes:
<link rel="icon" href="/favicon.ico?v=1.1">
Favicons are very heavily cached and this a great way to ensure a refresh.
Footnote about default location:
As far as the first bit of the question: all modern browsers would detect a favicon at the default location, so that's not a reason to use a link for it.
Footnote about rel="icon":
As indicated by #Semanino's answer, using rel="shortcut icon" is an old technique which was required by older versions of Internet Explorer, but in most cases can be replaced by the more correct rel="icon" instruction. The article #Semanino based this on properly links to the appropriate spec which shows a rel value of shortcut isn't a valid option.
Please note that both the HTML5 specification of W3C and WhatWG standardize
<link rel="icon" href="/favicon.ico">
Note the value of the "rel" attribute!
The value shortcut icon for the rel attribute is a very old Internet Explorer specific extension and deprecated.
So please consider not using it any more and updating your files so they are standards compliant and are displayed correctly in all browsers.
You might also want to take a look at this great post: rel="shortcut icon" considered harmful
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />
It all depends on which format of image you like to use!
if you have an icon of your website, it will be much better for UX!
demo
show logo in the browser tab
Update Oct 2020:
So if you are on this page scratching your head🤔 why my favicon is not working , then read along. I tried all the things (which I supposedly thought I was doing right) yet favicon was not showing up on browser tabs.
Here is one line simple cracker code that worked flawlessly:
<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">
Notes:
Put the image in the ROOT folder ( In one of my unsuccessful attempts , I was not using root dir)
Use direct favicon url link ( instead of href="images/bla123.jpg").
I placed this tag just below the <title> tag in the <Header>
I made the favicon size 64x64 px and size was 2.16 KB
I tested it on Firefox, Chrome, Edge, and opera.
OS: Win 10, Mac OSX, ios and Android .Also I did not experience any cashing issues, worked pretty much as soon as I refreshed the page.
We can add for all devices with platform specific size
<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">
The bottom line is not all browsers will actually look for your favicon.ico file. Some browsers allow users to choose whether or not it should automatically look. Therefore, in order to ensure that it will always appear and get looked at, you do have to define it.