I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a favicon.ico file in the root of the website.
I found this nice little guide: How to Add a Favicon. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).
Is there a third method that works across all the most popular browsers?
This is what I always use:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The second one is for IE. The first one is for other browsers.
You can use HTML to specify the favicon, but that will only work on pages that have this HTML. A better way to do this is by adding the following to your httpd.conf (Apache):
AddType image/x-icon .ico
I think the most reliable method is the simply added the favicon.ico file to the root of your website.
I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.
This is how they're doing it right here on Stack Overflow:
<link rel="shortcut icon" href="/favicon.ico" />
Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).
Edit: I'll try it and see if it works.
Edit 2: Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using .png files and it only worked with Firefox.
There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there's really no longer a simple answer. For a great explanation see this S.O. answer, but the short answer is:
Use this site which lets you upload a png/jpg and then does all the hard work for you: https://realfavicongenerator.net/
Related
I'm on symfony 5.3.
I want to import a node_modules file in twig.
So I did that:
<link rel="stylesheet"href="/node_modules#fancyapps/ui/src/Fancybox/Fancybox.scss">
But it isn't find when i load the page. I've tried by add "../" before, but I don't find the solution.
is there a function which allows, in the same way as {{asset ('')}} to go to the public folder, to go to the node_modules folder?
I haven't found anything about it personally.
The error in the console navigator:
GET https://localhost:8000/node_modules#fancyapps/ui/src/Fancybox/Fancybox.scss net::ERR_ABORTED 404
thank you very much.
Yet I searched for hours before asking you, but luckily I found a suitable solution just after.
In fact, it suffices to keep the same line except that instead of <link rel="stylesheet" href="node_modules_files"> it is necessary to put <link rel="import" href="node_module_file">
Thanks anyway! :)
I am experiencing an issue with setting canonical urls for my website. Moz crawler shows that each page is missing a canonical and when I inspect the page, the canonical is shown as follow:
<link rel=""canonical"" href=""https://website.com/"">
This goes for each webpage.
The website was built by a third party and the wait time for corrections is rather long. I've checked the CMS and the repository for errors, but nothing looks out of the ordinary. Any ideas?
edit: I should mention that I am aware of the extra quotes, but am unable to identify the error. Repository lists the following:
<link rel="canonical" href="{site_url}/{segment_1}/{segment_2}" />
To be valid it should look like so:
<link rel="canonical" href="https://website.com" />
It might be that the segments aren't set properly. Maybe they are set with something like freebie?
Anyway, the way it's set up now you will get some unwanted slashes if there are no url segments.. Maybe better to change this to something like <link rel="canonical" href="{site_url}/{if segment_1}{segment_1}/{/if}{if segment_2}{segment_2}/{/if}" />
I have a Java/Spring webapp and I'm trying to use grunt-cache-bust to cache bust my resource files (js, css) but this package doesn't seem like it is able to detect my resources and cache bust them. Does anyone know of another package that can do this while still allowing me to retain the use of JSTL's c:url?
I had referential problems loading resources in my site so I'm not open to removing c:url unless there's truly a better option.
grunt-cache-bust version 1.3.0 supports c:url value="someresource.js" inside a JS/CSS import. In the project I was working on discovered the reason why it wasn't working (which led to posting the question), the href or src attributes used single quotes instead of double quotes and these were not picked up by the cache bust module.
I changed this:
<link rel="stylesheet" type="text/css" href='<c:url value='/CSS/dialogs/dialog.css'/>'/>
to this and it worked:
<link rel="stylesheet" type="text/css" href="<c:url value="/CSS/dialogs/dialog.css"/>"/>
I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.
Does anyone know where it should be added or if there is anything else I need to update.
It depends on theme you're using, check theme documentation and source.
Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).
If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.
I use Landscape, the default theme at time of writing.
blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml
At the bottom of the file, you'll find a section titled Miscellaneous.
# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:
Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.
If you're still in need of a placeholder image, I've used Favicon.cc and had great results.
you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml
favicon: favicon.ico
so, you know the source is the root path
I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:
First, download your favorite imagename.ico image file from network or you make one by yourself.
Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.
Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
Done!
Konstantin Pavlov is right.
for example, I use hexo-theme-next theme.
I change code in themes/next/_config.yml.
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.
Add this to the head part of the html code...
<head>
<title>Test Page</title>
<link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
</head>
For more on this have a look at the W3C site : How To FavIcon
It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.
I've figured out how Mod rewrite works now however I've come across a new problem.
htaccess code
RewriteEngine On
RewriteRule ^([A-Za-z0-9-]+)/$ http://localhost/testblog/index.php?category=$1
I now know that this: localhost/testblog/dogs/
is equal to : localhost/testblog/index.php?category=dogs
however, when i put a link on the index.php file; Dogs that page (localhost/testblog/dogs/) now has the stylesheet prefixed with dogs/ so the stylesheet looks like localhost/testblog/dogs/stylesheets/style.css
but when I link with Dogs everything works just fine; localhost/testblog/stylesheets/style.css
I find it confusing because I thought that they now equaled the same thing using the .htaccess file?
how can i rectify this problem with the prefix?
Hopefully I've explained properly
Thanks
I think your issue is probably more the way you're linking the stylesheet. You're re-writing to /dogs/ and I'm guessing your stylesheet is linked like <link href="stylesheets/style.css" rel="stylesheet" type="text/css">. So when you point your browser at /dogs/ it's trying to load a stylesheet in relation to the URL, and it looks like /dogs/ is a folder so it's just appending stylesheets/style.css to your current URL. The best bet in my opinion would be to link absolutely to the stylesheet like: <link href="/testblog/stylesheets/style.css" rel="stylesheet" type="text/css">
Like said Jonathon, the browser compute relative link by appending the href to the url displayed on the adress bar.
To change this, you need to had a base tag
<base href="//localhost/testblog">
So, your browser will compute your link by adding your href to the base href.