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).
Related
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.
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.
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
Using converticon.com, I converted my icon png file into an ico file. I placed the following code in my head tags:
<link rel="shortcut icon" href="icons/icon.ico">
I double checked and the file is in the appropriate location. The image has read and write capabilities. I then loaded the page on my browser but I all I get is an empty square box with a dotted border. I'm using XAMPP server. Why isn't the image displaying?
Did you try testing this on multiple browsers? Different browsers handle favicons differently.
Here are some things you could try.
Clear Your Cache
Delete all references of your link in your favorites.
Clear the file cache in your browser.
Shut down all instances of your target browser.
Reopen your browser and navigate to your website.
Force Refresh
If you are using Mozilla Firefox then you should:
Navigate to your website
Navigate to the exact location of your fav icon eg. www.site.com/favicon.ico.
Right click in browser window and select refresh.
When this is done Firefox is forced to reload the icon instead of the cached version.
Default behaviour of browsers
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon.ico", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI thus I would recommend placing the favicon in the root instead and see if that works. (rename the icon to favicon.ico also).
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Image Format
At times there is an issue with the format of the favicon. If you are experiencing a problem across all web browser you could convert the favicon to gif or png and see if that solves the problem.
Force browser to update favicon
You can force your browser to update your favicon by passing a URL parameter. Using the ver parameter, you can increment the version number each time you want to force the downloading of new files.
add this to your markup.
<link rel="shortcut icon" href="/favicon.ico?ver=2.0" type="image/x-icon"/>
In MAMP (assume XAMP is same/similar) you would do the following:
- With MAMP running/open, hit the "Stop" button.
- Then go to: File > Edit Template > Apache httpd.conf
- Comment out lines:
#Alias /favicon.ico "/Applications/MAMP/bin/favicon.ico"
#Alias /icons/ "/Applications/MAMP/Library/icons/"
- Place your favicon.ico file in your site's root directory
- Start MAMP
You can probably do all sorts of crazy stuff here. Never worried about favicons during development, personally.
BTW - you don't have to clear your browser's cache, entirely. Just browse to the favicon and refresh it.... localhost:8888/favicon.ico
Just put the favicon at the root of your site, such as "example.com/favicon.ico" (make sure it is named favicon.ico though), and remove the above mentioned link element altogether. Browsers will check this location for a favicon by default if no is present, even IE.
After you do this, be sure to clear your cache when testing.
Try adding type attribute. Example:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">