I'm planning to create a cross-browser web site that does not use images(.jpg, .png, .svg, etc.) for modern browsers. Is it possible to replace favicon.ico with a #font-face?
The favicon is an image resource, not text, so it cannot be replaced with an icon font using #font-face.
If you absolutely do not want to use an image file, you can always create the favicon in an image editor, then serialize the file into a data URI:
<link rel="shortcut icon" href="data:image/x-icon;base64,...">
No, you have to use an image.
Sorry
You have to definitely use an image. But if you need a quick favicon made of some text and a background try http://antifavicon.com/
The answer is NO
Also it's not necessary to provide <Link> tag for your favicon.
Providing base64 data is much heavier. Instead, simply copy favicon.ico file to your webroot (public_html), server will automatically send this file as a favicon faster than any method.
Related
I'm getting an error in Firefox console of favicon not included in page.
Can favicon just accept png or jpg file type by the browser?
UPDATE:
I've added the link to the favicon as suggested:
I still get the error but it is a new error:
The simplest way to know is to test it. Just put a PNG image path in your HTML (using link) or the manifest.json to specify various icons for different device audiences (the app doesn't need to be a complete PWA). Read https://developer.mozilla.org/en-US/docs/Web/Manifest/icons to learn about the specification. For the example of the link element in the HTML, I used the following code inside the <head/> element, and I was able to see the Google icon (which is a PNG on the tab):
<head>
<title>Using PNG Icon</title>
<link rel="icon" type="image/x-icon" href="<link-to-image.png>">
</head>
This should update the icon for you. Note that sometimes a browser might cache the resources, so consider a hard refresh to load the fresh copy of the web document.
Also, it is interesting to note that caniuse website specifies that a PNG file is preferable.
I have a problem with the advanced website manager that I am currently using, and that is that it does not allow me access to the HEAD tag, therefore I cannot set a FAVICON on the website. I would like to know if there are other alternatives to insert a favicon on the website without changing the HEAD code. The website lacks the appropriate tag to insert a favicon.
I know it can be a little crazy, but thanks anyway...
You will be able to insert a <link rel="favicon"> by adding a short javascript just before the closing body tag (</body>):
<script>
let faviconLink = document.createElement('link');
faviconLink.setAttribute('rel', 'favicon');
faviconLink.setAttribute('href', '/path/to/favicon.svg');
faviconLink.setAttribute('type', 'image/svg+xml');
document.head.appendChild(faviconLink);
</script>
The example above uses an SVG favicon, but you can just as easily use another image format with another MIME type:
PNG: type="image/png"
GIF: type="image/gif"
You can add a favicon.ico file to the root directory, browsers will still check for it even if it’s not defined in the <head>.
BTW, this is a great site for generating all the various app icons and associated code https://realfavicongenerator.net
I've looked at several posts on here, and I've done further research online, but I can't see to find the problem.
I put the favicon.ico in the main directory, but it's not showing up on any browser. I've tried it personally on Firefox and Safari, and I've tried the rest on Browsershots.
I also have this line in the head of the html:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
I've also tried it without the type..., as I have it on other pages on the same server.
This website doesn't show its favicon (thistle)
This website does show its favicon (greenman)
Two of my sites on the same server with the favicon in the same place of the site's directory. ??
The only thing I can figure is there was a problem converting the ico online and saving it on my MacBook Pro before uploading it to the server?
Any help or hints or thoughts are greatly appreciated.
Had the same problem. Found this great answer: https://stackoverflow.com/a/16375622/5359989
What worked for me was changing 'favicon.ico' to something unique such as 'myfavicon.ico' and referencing it in the html accordingly. Hope this works for you also.
Change this:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
To this:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
Another reason why your favicon is not shown could be because you're viewing a cached version of your site.
Clear your cache and open the site again and you will see the favicon.
Chrome didn't like the fact my favicon.ico was a 64x64 image. I changed it to a 32x32 pixel image and it showed right up!
You're using a relative path in your href="" attribute. Change it to a root-relative path /favicon.ico or an absolute path http://yoursite.com/favicon.ico.
Not all icons are the same! I had this problem for a while and could never figure out why some browsers didnt show the icon. I knew with absolute certainty that the file existed where the link tag said it did. Eventually I discovered that, at least for Chrome and Opera, they WONT display some icons depending on the formats within the .ico file.
E.g. a .ico that has, only, 64x64 and 32x32 and 16x16 formats will display.
BUT a .ico that also has, IN ADDITION TO those above, 512x512 256x256, 128x128 and 48x48 formats, will NOT display.
That really looks like a browser issue but its curious that it affects more than one browser.
Anyhow the solution, for me at least, was to only include 64x64 and 32x32 and 16x16 formats.
I had the same issue but solved it in the following way.
In w3schools at the "HTML favicon" section it says:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
In my case I had a project in express.js. In express one sets the root directory of static files with the command:
app.use(express.static('public'))
In my project, "public" seemed as the root directory for all my static files. So, I just had to add a folder named "image" inside "public" where I saved my "favicon.ico". Finally I linked the icon in my main template html file according to my project's directory tree:
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
Notice that I don't have to refer to the public folder because it is set as root by my framework.
In summary I think that if one uses a simple html project with vanilla js the w3schools' guideline is straightforward. But, if you're using a framework like express, Django etc. you have to think carefully how does your framework serve your static files.
Duplicate:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
I want to add my logo in the address bar of the browser, whenever it is browsed.
How do I make a favicon?
You need a favicon - this is a 16x16 image in .ico format stored as favicon.ico in the root directory your site. Some browsers do support other formats too.
A newer, more standards based approach is to include something like this in your html head:
<link rel="icon" type="image/png" href="/path/image.png"/>
See also this document from W3C: How to Add a Favicon to your Site
You might also want to refer to these other answers to the question:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
That image is called a favicon and here are some links on how to add one or you can just google "how to add a favicon" for more information.
http://www.w3.org/2005/10/howto-favicon
http://www.clickfire.com/favicon-tutorial
http://essentialkeystrokes.com/tutorial-how-to-create-your-own-favicon
See http://en.wikipedia.org/wiki/Favicon
Are you talking about creating a Favicon?
If so, here's a site which will help you make one.
Just use this.
<link rel="icon" type="image/png" href="/path/image.png"/>
I hope it works for you.
How do I write code where a company icon appears on the left side next to the URL address in the browser's address bar?
You are looking for a Favicon.
it loads www.whateveryouron.com/favicon.ico
if your domain is robermyers.com, just put a favicon.ico 16px icon thats accessible, and you're in like flint.
just try this googles or stackoverflows
You need to create a favicon. The favicon uses a standard (in Windows, at least) .ico file. If you have a logo, you can convert it at sites like http://www.favicongenerator.com/
In the <head> of your html page, use the <link> tag to define the location of the favicon like this:
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
You may need to refresh the page for the icon to display.
load a file on the webserver called favicon.ico
In modern browsers other fileformats than .ico works aswell. You can even put animated gif's in there!
DynamicDrive has an easy favicon maker too.
Different pages/directories can also call a different .ico with code similar to y0mbo's example (this is what Mint uses):
<link href="sc/ph645.43/images/icons/mint.ico" rel="icon" type="text/x-icon" />
This is a good article on favicons in detail.
I suspect animated favicons have the potential to go the way of the blink tag. Mint is using theirs to match their overall design, if you visit in FF3, you'll see that it matches the green color that FF uses to designate a recognized SSL cert.