I'm trying to get a favicon to appear on a Jekyll GitHub Pages site. I'm using the Bulma Clean Theme and have placed a PNG favicon in the project's main directory. However, the favicon does not appear in my web browser (Chrome).
The theme's documentation states, "The default favicon path is {{ site.baseurl }}/favicon.png but you can overwrite it in the sites _config.yml like this favicon: /path/to/favicon.png". I have not changed the default favicon path.
The site is https://nlakritz.github.io/ach, any help would be much appreciated!
Yes it is working (tested on Chrome 84.0).
But then also if it is not working for you, then avoid using shortcut in rel="shortcut icon", such that <link rel="icon" type="image/png" href="./favicon.png">.
Related
I have the following file structure in my React App - public folder:
So my custom favicon that I added(instead of the default React one that I deleted) is working fine, it shows up. Now when the pdf opens in the browser it shows the React favicon.
I read here that the pdf is not a regular html page, so the favicon is not defined as it could be. The fallback is the favicon with the .ico extension in my public folder.
But if thats the case then it should show my favicon that is already in the public folder?
The pdf is linked this way, I use the Link Mui component:
<Link
href="/documents/Privacy-Policy"
target="_blank"
rel="noopener noreferrer">
Privacy Policy
</Link>
What can I do so my favicon or at least no favicon shows up?
In your public folder, check the index.html file.
You will see <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Edit it to any image name of your choice.
In my case, I would use <link rel="icon" href="%PUBLIC_URL%/logo.svg" /> to denote my preferred image name
Update
In production it shows no favicon on Chrome and Firefox.
While on localhost it still shows the default React favicon on Chrome and Firefox.
Best case would be to have also my favicon when I open the pdf in Browser but no favicon is good enough for me.
Maybe, you can just rename it from logo.ico to favicon.ico (which is the name of the default react favicon).
I am using following code to display favicon.ico:
<link rel="shortcut icon" type="image/x-icon" href="https://{domain}/res/202009100200/images/favicon/en/favicon.ico"/>
Using this URL favicon.ico loads correctly. But Chrome does not show any favicon and if I inspect via Development console I realize it tries to load favicon from site's root (where it obviusly does not exist).
Why is Chrome trying to find favicon in site's root instead of the location I provide? In Firefox and Edge it works.
you can use this code
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
It is working when I use
Most of time browser use the favicon location as root directory not the directory specified in href attribute. Try to Putting favicon at root directory.
I all refer to go to this Favicon location ignored by chrome an already active question with many answers hope it help.
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
I've been banging my head against the wall for hours now trying to get this favicon to work. My site is hosted on Bluehost and I uploaded a favicon.ico file to the public_html folder. It always just shows the default Bluehost logo in both Safari and Chrome. I included the following in the header after all the meta tags:
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />
Have tried icon sizes 16x16 and 32x32, always named favicon.ico, and also tried putting href="http://www.mydomainname.com/favicon.ico" in the tag. I am always clearing the cache before trying to load the site.
If I inspect the page source in Chrome, I see the link for the favicon, and the page source page in Chrome shows the favicon correctly. When I click on the favicon link then try to load the site, the favicon I want flashes briefly before going back to the default Bluehost one.
In case it matters, I just migrated the site from Wordpress and deleted all the "wp" files, but maybe something is left that's screwing it up. Anyone have any other ideas?
I'm not sure if that gets cleared from the cache when you clear the browser cache but what you can try is adding a cache-buster to the path. ex: favicon.ico?ver=20130212
See the small logo/icon in the tab when you open any website in any browser?:
How can I put such logo/icon on my wordpress blog?
This is called a favicon. You link to it in the head section of your HTML.
You can read more about it here: http://www.w3.org/2005/10/howto-favicon
And view a list of Wordpress plugins that do the work for you here: http://wordpress.org/extend/plugins/tags/favicon
Two ways,
the first is use this plugin
http://wordpress.org/extend/plugins/shockingly-simple-favicon/
Or, if you really want to learn how it works. Open your theme folder (normally under wp-content -> themes -> your theme name) and then normally in the header.php file there is everythign that happens in the head of your pages.
Any where in the <head></head> place the following code...
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Where /favicon, is the link to your favicon.ico.
To easily make a favicon, use the following link.
http://www.favicon.co.uk/
Hope this helps you learn how to do it and what the actual plugin does for you :)
Use plungin: http://wordpress.org/extend/plugins/shockingly-simple-favicon/
You just need to put the image into a file named favicon.ico in your website's root directory (like www.stackoverflow.com/favicon.ico). Browsers request this file when a user visits your site and will show it in the tab or bookmarks. You can find more info on wikipedia or even use http://www.favicon.cc/ to help you design the icon.
There are two ways.
In your template header.php file, you have to add the favicon code: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
or, you just put the favicon.ico into your www root. Apache has a configuration setting which will load this as default.