So I created a 16x16 favicon.ico file and placed it in my public/assets area. I also double downed and put it in my app/assets/image section.
I added and the image will not load up in Chrome, but it seems to load up in Firefox and Safari for me. That said, it won't load up in any of my friend's browsers. I also tried with or without the /.
<%= favicon_link_tag '/favicon.ico' %>
So I tried
<link rel="shortcut icon" href="cameronswiggett.com/favicon.ico" />
and same results.
I went to config/enviroments/production and made
config.serve_static_assets = true
the thing that confuses is me when I go to www.mysite.com/favicon.ico I see a broken image. So, obviously something is wrong but I am at a loss. Any suggestions?
Thanks!
Here is how I did it on my apps :
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
<link rel="icon" href="/img/favicon.png" type="image/png">
Here my favicon is in /public/img folder, it works for me so it may works for you, I added the two tags to make sure it works everywhere
Related
I have an Electron (1.7.10) application that is reporting it can't find 5 of 7 PNG files in my ASAR. All 7 PNGs are in the same folder, and 2 of them are displayed on screen fine. The other 5 report net::ERR_FILE_NOT_FOUND.
All src attributes for the img tags are dynamically generated and use relative paths (assets/images/MyImage.png). If I extract the ASAR, I can see the files in there, in the correct folder (as referenced by the src attribute).
If I use the console to set the location of my browser to one of the images (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") I get the same results - 2 of 7 show OK.
Before packaging my application (with electron-builder), all images show correctly.
Let me guess, you are building a react SPA using react-router, and BrowserRouter?
If so, use HashRouter instead. Electron does not work with SPA's route by default, because a SPA route changes, but the resource path is always relative to index.html.
I haven't evaluated the other answers, but for my particular case, an extremely solution worked. I don't believe this is well documented, so it might be fairly common for people to still encounter this issue. For my particulars, the relevant problem and solution were identified here.
To address, add <base href='./' /> to the index.html (or whatever your starting html file is that hosts your SPA). This is a complete example of mine:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="./" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'Self' 'unsafe-inline';"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
const path = require('path');
path.join(__dirname, 'assets/images/MyImage.png');
I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
I have not found a specific area to save the favicon.ico so I sending him to the area of assets.
But I can not get it back again.
This is in fact not related to Radiant at all.
As with any Rails application, you should just put your favicon.ico in the public/ folder.
Update: Ok.. if you múst use the backend to set the favicon, you could just do this in your layout:
<link rel="shortcut icon" href="<r:asset id="your asset's id"><r:link/></r:asset>" type="image/x-icon" />
.. or just 'hard code' the path to the asset you uploaded:
<link rel="shortcut icon" href="/assets/your asset's id/favicon.ico" type="image/x-icon" />
I'm having an issue with the bundling and minification feature of ASP.NET MVC 4 Basically I have the following bundle setup:
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.min.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
when they are placed on the page they come out like so:
<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>
First problem is that the Tilda ~ is not coming in the beginning of the link and I think that's one of the problems (site not rendering properly) now all of the above css stylesheets are resolving but there are a lot of imports and relative urls (images) and I think those are getting messed up (without the bundles, if I just point to ~/backendContent/.... everything is working just fine
Second problem is that when I set BundleTable.EnableOptimizations = true; there are a lot more problems and digging deeper I get a huge list of
(4368,1): run-time error CSS1019: Unexpected token, found '#import'
(4368,9): run-time error CSS1019: Unexpected token, found 'url("layout.css")'
I don't know if this is important but the minified and rendered style link produced by #Styles.Render("~/backendcss") is:
<link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>
Any Ideas? I'm sorry but this is the first time I'm using this feature and with this site having so many css and js it would save a lot of bandwidth and speed up the whole site. Plus its just plain cool (that is if I can get it to work)!!!
The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application
I'm not sure why you are having issues with the actual minification, but that'd be pretty hard to diagnose without the source.
The link when optimized should look like that. the ?v=xxx at the end is for cache busting so that people get the updated css when you change the css files.
I think for minification to work you need to add in global.asax file
BundleTable.EnableOptimizations = true;
Also can you try to create different groups of for example keeping jqueryui separate from bootstrap and so on.
Darren Kopp is right "The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application"..
And don't use ".min" because when you set BundleTable.EnableOptimizations = true; it will be minimize your files.. So it should be like this;
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
I have tried to use
<link href="/favicon.ico" rel="shortcut icon" />
as well as this
<link href="/assets/favicon.ico" rel="shortcut icon" />
but I am still seeing this error in the log file
ActionController::RoutingError (No route matches [GET] "/favicon.ico"):
the favicon.ico is there in public folder (I have also put it in app/assets folder too)
How to fix this error ?
You're getting this error because you don't have a favicon.ico in your public/ directory of your application. Because the file doesn't exist there, Rails moves on, looking for a route to match against /favicon.ico in the config/routes.rb.
You can fix this in one of two ways
Manually place the favicon.ico file in the public/ directory of your application.
Put the favicon.ico in app/assets/images/ and then change your <link ... tag to use image_path
<link href="<%= image_path("favicon.ico") %>" rel="shortcut icon" />
This will place the favicon.ico in public/assets/favicon.ico, not in the document root.
I suggest sticking with #1 above.
As for why this request is even showing up in your logs, many modern browsers look in the root of the domain for /favicon.ico to use for bookmarking, or presentation in a tab or the address bar. This is why it's a good idea to keep the favicon.ico in the root of your domain, in case a browser decides (for whatever reason) to ignore your <link rel="icon shortcut" ... tag.
This is what Rails generates in application.html.erb by default:
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
It doesn't find favicon.ico this way when it's under /public
It works correctly (finds favicon.ico under /public) if you change the tag to:
<%= favicon_link_tag %>
Putting favicon.ico in my public folder wasn't working, so I combined some of the other answers to come up with this simple working method.
Copy the output of favicon_link_tag and inject image_path like so:
<link href="<%= image_path("favicon.ico") %>" rel="shortcut icon" type="image/vnd.microsoft.icon" />
Now place favicon.ico in your assets/images folder and you're set.
Put the favicon.ico in app/assets/images/ and then add
<link href="<%= image_path("favicon.ico") %>" rel="shortcut icon" />
in the layout file.
This works for me.