<link rel='shortcut icon' href='img/favicon.ico'>
The above line is inside head part of page.
favicon.ico is inside img folder.
Doesn't work in Firefox and Chrome.
I restarted browsers, cleared the cache many times...
Any suggestion.
I also tried:
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
You forgot to self-close the link tag.
I think it is recommended to use double quotes as well:
<link rel="shortcut icon" href="img/favicon.ico"/>
If this doesn't work, have you tried to actually access the favicon image by typing the url like: http://example.org/img/favicon.ico to make sure it is reachable ?
Try using:
<link rel="icon" type="image/x-icon"
href="image/favicon.ico"/>
without the "shortcut"
if that doesn't help, you might find something in this
Wikipedia article on favicon
If any of the other answers don't work, just put ! in front of the tag.
Related
I am trying to add icon to html page.
Following is the code,
<link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
Here I am trying to get favicon.ico from specific path.
This works on chrome but not on IE.
IE 11 version
Did you try this method:
<link rel="icon" href="url/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="url/favicon.ico" type="image/x-icon" />
<link rel="ICON" type="image/x-icon" href="http://example.com/myicon.ico"/>
Try any of these and check whether It worked for you.
Check this out:
How do I force a favicon refresh
Basically, IE11 is fierce about caching the favicon. Adding a cache buster in the URL might fix it. Something like ../../images/favicon.ico?v=1.
Another user also suggested removing type="image/x-icon".
i have a network based on php and html. Now i have the issue, that the favicon doesn't show up in google-chrome. If i use firefox all works well. Any advices?
My Code:
<link rel="shortcut icon" href="http://teabag.webclient2.de/minis/images/favicon.png" />
Website: http://teabag.webclient2.de/minis/
Thanks!
I just checked out your website and noticed you have <link> placed in the <body> tag.
It should be within the <head> of the document instead. In doing so, it will work.
Try this:
<link rel="icon" href="http://teabag.webclient2.de/minis/images/favicon.png" />
It worked for my icon :)
Try clearing your cache. Then add this:
<link rel="icon" type="image/png" href="http://teabag.webclient2.de/minis/images/favicon.png" />
Is it possible to have this code:
<link rel="icon" href="icon.gif" />
Using css document?
(I would rather not have to go through and add that to every pages)
and is it possible to set title of page using css(I am not gonna use it as all pages have different title but just for general info)
You cannot set the favicon using CSS.... You need to use a link tag with rel value of shortcut icon.
Inorder to set that, you need to put the below string in between the <head> tags..
<link rel="shortcut icon" href="favicon.ico" />
-----^-----
<!--Remember to have .ico as the extension else
some browsers fail to load other extensions -->
You need to also specify the type attribute here type="image/x-icon" if IE fails to load your favicon, if it loads fine, you can just ignore the type attribute.
You can't do it using CSS it can only be done by inserting
<link rel="icon" href="icon.gif" />
as you have described above..
CSS is used to format some text/images etc in the page and and there is nothing to format in icon let me guess if you are working on many pages you probably have either a blog or an script to generate pages just add this line of text in it..
And you can always change icon of each page at once by just changing the icon itself...:)
You can't set a favicon from CSS - if you want to do this explicitly you have to do it in the markup as you described.
Most browsers will, however, look for a favicon.ico file on the root of the web site - so if you access http://example.com most browsers will look for http://example.com/favicon.ico automatically.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
In href, you have to pass the image url.
Here is the combination of combination of .ico and .gif image
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
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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">
I am trying to upload a favicon in my wordpress site. I have followed every step correctly but still its not showing the favicon. Fisrt I converted my pic to favicon.ico . Then I uploaded it to my root directory. Then I added the following code to my header.php file in the <head> tag :
<link rel="shortcut icon" href="http://misspassiton.com.au/favicon.ico" />
I have tried this one as well
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
I have also visited : http://codex.wordpress.org/Creating_a_Favicon
but nothing seems to be working. I dont know whats wrong with it. I would be grateful, if anyone could help me
Regards
Omayr.
It seems that your .ico file is corrupted. I can't open it in my browser. Other than that, it looks like you are doing everything ok.
If you can open http://misspassiton.com.au/favicon.ico directly in your browser, then you'll know it's working.
Requesting http://misspassiton.com.au/favicon.ico, it responds but seems that the image is broken. So the href is ok ;)
2 suggestions:
First: try to use a tool that
converts images in ico (i.e.
http://www.favicon.cc/)
Second: if you want to use
bloginfo(), you have to pass as
parameter 'url' because if you pass
'template_directory' it will return
'http://example/home/wp/wp-content/themes/parent-theme' that is completely wrong and as you can see it doesn't point to public root
(see the reference)
edit : add also type on the link (for IE)
<link rel="shortcut icon" href="http://misspassiton.com.au/favicon.ico" type="image/vnd.microsoft.icon" />
I was having the same problem. The code below worked. Add to the header.php file right before the end head tag. Your image should be in the root of your wordpress installation.
/* ADD FAVICON */
<link rel="icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />