As seen here - http://imgur.com/a/g72bN
I have several websites with icons. My personal website however, is just the first letter of the website.
How do I add an icon that will appear in Safari favorites? The Favicon doesn't display here as I had originally thought.
You can put an icon to your browser (called favicon) with this in your <head>:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
and for apple:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Read this article if you want to know more about it: https://css-tricks.com/favicon-quiz/
Remember that Icons take a long time to update so you'll need to wait a bit.
You need to set the apple-touch-icon like in the example below:
<link rel="apple-touch-icon" href="/custom_icon.png">
Insert this in your head:
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.css-tricks.com/favicon-96x96.png" sizes="96x96">
just replace the links with your fav-icon at that size, so it looks nice and not blurry
Related
vscode snapshot of html code
It is Not working on any browser Brave,chrome,firefox
A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.
The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors.
Usually a common name for a favicon image is favicon.ico
<link rel="icon"
type="image/x-icon"
href="/somewhere/favicon.ico" />
With the introduction of smartphone tablet and other devices, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
Thus, websites such as https://www.favicon-generator.org/ were born and create all the necessary
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Since you uploaded a screenshot, it is difficult to see where the problem lies. Whether in the image size or a path problem
I have a problem with my favicon in Chrome. It won't show in one page.
I don't really know why but I guess it's because it works with a token, so if the token is different it takes other stuff from my database. in other words the page is never the same. I also tried some other stuff from stackoverflow but it wouldn't work either. Somehow it will work in Microsoft Edge.
this is what I tried so far (header.php):
<link rel="icon" type="image/png" href="/healtywavezicon.png">
<link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="60x60" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="144x144" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="96x96" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/healtywavezicon.png">
I also tried to put it directly in the index.php:
<head>
<link rel="icon" type="image/png" href="/healtywavezicon.png">
<link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
</head>
If your favicon does not work on Chrome but works on Edge, Firefox and others, this may be because your header contains a body-only markup.
If you put that in index.PHP then you should make sure that they're in header tags rather than in tags. otherwise,check the image urls
Since you have a leading / in your href, you are referencing a file that will be in the root folder. In case you have your page in a folder on your computer, not serving it from a local web server, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expects the file to be at C:/favicon.ico or similar, which is probably not what you've expected.
If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.
<link rel="shortcut icon" href="favicon.ico" />
Update:
As a debug option, you could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.
<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
Update 2:
It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a web server.
I have this code on every page of my website.
<link rel="icon" sizes="192x192" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" />
Yet when I go to my website on Chrome for Android and tap "Add to home screen" my icon never shows up in the dialog. My image is of the correct size and exists.
What is going on?
I have used this documentation from Google.
Update
My website is http://compesh.com
Look at the page source and see if I've made any mistakes.
It works in Firefox for Android but not Chrome for Android and Chrome for Windows. I see this in Firefox WebIDE
2nd Update
Firefox for Windows is not showing my favicon image in the tab. Instead it is showing the wrong image and scaling it down to 16x16 pixels, instead of using my 16x16 favicon I specified in my web page.
hey try this one just go to https://www.favicon-generator.org
and choose your file and click on create favicon.
Now Download the rar file and extract where your project file is and then copy below code
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
now refresh the browser or try in another browser
You have placed below div (maybe mistakenly)
<div style="display: none;">
tag right after
<meta name="viewport" content="width=610">
in your head tag, that's why browser is closing your head tag before that div and favicon not showing. Remove that div from your head and everything will be fine.
buddy you are using html 4, why don't you use html 5.
and in href="/" it's not necessary to give full path/link. in your code
just do some minor change. i hope it will help you.
i guess #sarvesh has explain you everything
<link rel="icon" type="image" href="assets/graphics/favicon.png" sizes="16x16">
Since you are using a png file as your high res icon, can you try adding the type attribute, like so:
<link rel="icon" type="image/png" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" sizes="192x192" />
This helps distinguish it as a png file and not a regular favicon.ico file.
Try this in your href :
http://compesh.com/assets/graphics/touch-icon-chrome.png?v=2
You see the "?v=2" for clearing cache directly
Try this:
<link href="https://compesh.com/assets/favigen/favicon-96x96.png" rel="icon" sizes="96x96" />
Works fine on my android phone.
I tested it on
http://helledussen.com/test
I looked into this as well, and a solution I found was to make 4 different sizes and link to them with rel="apple-touch-icon". It has been tested on iPhone, iPad, Android, and Blackberry:
<link rel="apple-touch-icon" sizes="57x57" href="../images/YourIconName57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../images/YourIconName.png" />
My code to set up favicons looks like this:
<link rel="shortcut icon" href="/Images/favicon.png">
<link rel="shortcut icon" href="/Images/favicon.ico">
<link rel="apple-touch-icon" sizes="114x114" href="/Images/apple-touch-icon-retina.png">
<link rel="apple-touch-icon" sizes="72x72" href="/Images/apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" href="/Images/apple-touch-icon.png">
I am using vector icons everywhere in my application now.
Does anyone know if there is a way that I can specify the favicon that the browser uses as a vector icon?
This is not supported by any browser at this time so you cannot do this.
I have tested my site with Woorank and shows a warning about missing of the Apple Icon.
I have searched but I'm not sure how to include this icon, I have found this code
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
Must I include these lines in the head in the same way of the standard favicon? (My website is in HTML5)
What is the resolution of the first images in these lines "apple-touch-iphone.png"
The smallest icon should be 57×57 pixel.
Be aware, that the "-precomposed" states, that the linked icon file is already shiny and in 3D. If you leave out "-precomposed", iOS will add a 3D brilliance effect to the image.
And yes, of course do you need to insert the link-tags to the head.
Example for a complete icon set:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="icon.57.png"><!-- iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="icon.72.png"><!-- iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="icon.114.png"><!-- iPhone4 -->
<link rel="icon" type="image/png" href="icon.114.png"><!-- Opera Speed Dial, at least 144×114 px -->
Docs on Apple iOS icons: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html
Docs on Opera Speed Dial icon: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/