How to block a favicon set by the server? - html

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).

Related

How to remove unwanted favicon

So recently I bought a domain and set it up with Wordpress. I then uninstalled WordPress because I just wanted a static landing page. However, for some reason there seems to be this favicon that I didn't add.
So I delete all my files on the site and it's still there!
I don't know how to remove it.
Here is a screenshot of the favicon:
Browser's caching it. You can set one like this:
<link rel="icon" href="http://www.yoursite.com/favicon.ico" />

favicon.ico not showing up anywhere

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.

fav icon does not work in html5 Boilerplate

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.

Why does my favicon revert to a server icon when I call "View Source"?

This website has a favicon:
link rel="shortcut icon" href="http://www.pathfolios.com/sites/default/files/Untitled-1%20copy%20%281%29.png" type="image/png"
The favicon appears normally when accessing pages within the site.
When using admin pages and particularly "viewing source" the icon becomes a stock icon of the server host. It happens on other computers as well.
Is it as simple as putting my icon file as favicon.ico?
I really want to know why if possible.
Use this to covert it http://www.convertico.com/

Personalized icon next to the URL address in the browser's address bar?

How do I write code where a company icon appears on the left side next to the URL address in the browser's address bar?
You are looking for a Favicon.
it loads www.whateveryouron.com/favicon.ico
if your domain is robermyers.com, just put a favicon.ico 16px icon thats accessible, and you're in like flint.
just try this googles or stackoverflows
You need to create a favicon. The favicon uses a standard (in Windows, at least) .ico file. If you have a logo, you can convert it at sites like http://www.favicongenerator.com/
In the <head> of your html page, use the <link> tag to define the location of the favicon like this:
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
You may need to refresh the page for the icon to display.
load a file on the webserver called favicon.ico
In modern browsers other fileformats than .ico works aswell. You can even put animated gif's in there!
DynamicDrive has an easy favicon maker too.
Different pages/directories can also call a different .ico with code similar to y0mbo's example (this is what Mint uses):
<link href="sc/ph645.43/images/icons/mint.ico" rel="icon" type="text/x-icon" />
This is a good article on favicons in detail.
I suspect animated favicons have the potential to go the way of the blink tag. Mint is using theirs to match their overall design, if you visit in FF3, you'll see that it matches the green color that FF uses to designate a recognized SSL cert.