the fav icon in html5 Boilerplate doesn't work (doesn't show up)
I have tried it on localhost and also on a server but in both the cases it didn't worked.
Whats the to make it work .?
HTML5 Boilerplate doesn't use link elements for icons by default. Instead, it relies on the browser finding either favicon.ico or apple-touch-icon.png in the root directory.
If you put HTML5 Boilerplate in a sub-directory, whether in localhost or on a server, either no favicon will appear or an existing favicon in the server's root directory will appear. A quick fix for this is to add this line of code in the <head> section of index.html :
<link rel="icon" type="image/png" href="apple-touch-icon.png">
Even better would be to create a 16x16 PNG image (e.g. favicon.png) instead of using the 57x57 apple-touch-icon.png, which gets resized and therefore loses clarity.
See the Favicons and Touch Icons section of the user guide for more details.
Related
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.
I don't want favicon for my website. Unfortunately my web hosting service imposes one. All my pages shows a favicon with the name of my hosting service.
How can I get rid of the (commmercial) favicon?
I could set a customised favicon but it is a personal website and I don't know what (very little) image could reflect me... And even if I found an idea, I don't have the time or skills to create a beautiful image.
I thought putting the html code without actually sending a image : (favicon.png does not exist)
<link rel="icon" type="image/png" href="img/favicon.png" />
But it's not working (it doesn't block the default favicon).
I could put a white image to override the commercial favicon but the rendering isn't beautiful (white empty favicon on gray browser...)
Here! I made you a favicon :) Use it to your heart's content (if you like it).
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">
Duplicate:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
I want to add my logo in the address bar of the browser, whenever it is browsed.
How do I make a favicon?
You need a favicon - this is a 16x16 image in .ico format stored as favicon.ico in the root directory your site. Some browsers do support other formats too.
A newer, more standards based approach is to include something like this in your html head:
<link rel="icon" type="image/png" href="/path/image.png"/>
See also this document from W3C: How to Add a Favicon to your Site
You might also want to refer to these other answers to the question:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
That image is called a favicon and here are some links on how to add one or you can just google "how to add a favicon" for more information.
http://www.w3.org/2005/10/howto-favicon
http://www.clickfire.com/favicon-tutorial
http://essentialkeystrokes.com/tutorial-how-to-create-your-own-favicon
See http://en.wikipedia.org/wiki/Favicon
Are you talking about creating a Favicon?
If so, here's a site which will help you make one.
Just use this.
<link rel="icon" type="image/png" href="/path/image.png"/>
I hope it works for you.
This question already has answers here:
What is the best practice for creating a favicon on a web site? [closed]
(4 answers)
Closed 1 year ago.
What is currently the best way to get a favicon to display in all browsers that currently support it?
Please include:
Which image formats are supported by which browsers.
Which lines are needed in what places for the various browsers.
I go for a belt and braces approach here.
I create a 32x32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.
Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
Place favicon.png in my images sub-directory (just to keep things tidy).
Add the following HTML inside the <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />
Please note that:
The MIME type for .ico files was registered as image/vnd.microsoft.icon by the IANA.
Internet Explorer will ignore the type attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.
Reference
I use .ico format and put the following two lines within the <head> element:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate
More information on touch icons can be found in this article.
With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:
If no icons are specified in the HTML, iOS Safari will search the
website’s root directory for icons with the apple-touch-icon or
apple-touch-icon-precomposed prefix. For example, if the appropriate
icon size for the device is 57 × 57 pixels, iOS searches for filenames
in the following order:
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
My advise is to not include a favicon in your document, but have a list of files ready in the root website:
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png (57px*57px)
favicon.ico HiDPI (32x32px)
When you download a template from html5boilerplate.com these are all included, you just have to replace them with your own icons.
Wikipedia to the rescue
IE6 cannot handle PNGs correctly, be warned.
Favicon must be an .ico file to work properly on all browsers.
Modern browsers also support PNG and GIF images.
I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.
There is also a site where you can check how the favicon of any page is made
getfavicon.org
There you can see a tutorial about making favicons, image types and resolutions, it's nice!
Having a favicon.* in your root directory is automatically detected by most browsers. You can ensure it's detected by using:
<link rel="icon" type="image/png" href="/path/image.png" />
Personally I use .png images but most formats should work.
The answer to this question has become complicated enough that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: https://realfavicongenerator.net/