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
Related
I've got a problem with my website; the favicon won't show no matter what I try.
My home page is
http://www.emilienpetit.com/Index2.html
and the favicon is located at
http://www.emilienpetit.com/favicon.ico
The current code is
link rel="shortcut icon" type="image/vnd.microsoft.icon" href="www.emilienpetit.com/favicon.ico"/
but I tried with rel="icon" only and with type="image/jpg" "image/x-con" "image/ico" etc.
Can you please tell me what else I could try for it?
Regards,
Your href is a little off. Currently:
href="www.emilienpetit.com/favicon.ico"
will attempt to hit the url:
http://www.emilienpetit.com/www.emilienpetit.com/favicon.ico
So you'll either have to add the http:// or use a relative link.
href="http://www.emilienpetit.com/favicon.ico"
or:
href="/favicon.ico"
Edit
I noticed that it looks like all of your links are facing the same problem. I would suggest either keeping all the links relative to your root or, if you're using server-side processing, setting up a 'base url' so that you don't have to redefine the url each time.
I would recommend replacing www.emilienpetit.com/ with just / because currently the webpage is saying the favicon is in http://www.emilienpetit.com/www.emilienpetit.com/favicon.ico. Putting /favicon.ico will lead the browser to the favicon.
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.
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.
The site uses a favicon stored in the root, but the https admin section is using the old favicon and I'm not sure where it's coming from.
Does anyone know of a way to find favicon site resources, i.e. where they're coming from? The unsecured pages all use the same head CSS with references to the same favicon, but the admin references no favicon, so I'm baffled as to why it's using the old one on those pages.
On your site using the selector document.querySelector("[rel='shortcut icon']") gets the element:
<link rel="shortcut icon" href="http://www.inside-guides.co.uk/favicon1.ico" type="image/x-icon">
You can reveal the element in the html panel with most javascript consoles if you want to see where its being declared in your html. In your case its declared:
If there is no favicon.ico in the root of the site, then view the source of the site and look for <link rel="shortcut icon"/>. It should have a href attribute. This would tell you the file location.
Most browsers will look for a favicon at /favicon.ico if they don't see a tag.
Source: https://stackoverflow.com/a/21359390/13683677
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.