Search code examples
htmlamazon-ec2iconsfavicon

Why doesn't my website icon show?

I'm trying to have an icon for my website, I've uploaded my image to Favic-o Matic's Website and got the image and the HTML code back, and implemented it. But I can't see my icon anywhere, I've tried deleting the cache and saving my site as a bookmark. No matter what I do, I can't see my icon, why don't I see it?

Some extra nerdy stuff (if helpful): I'm using Amazon AWS EC2 instance, and uploading my files via SSH using Terminal.

Here's two screen shots, the first is of my Finder folder that houses my website files on my computer. Note: my website is live on my EC2 instance, FYI. Finder window The second one, this is a screen shot of Terminal accessing the files on my server, the files are at /var/www/html as you can see with the cd command.

enter image description here

Update: All the image files appear to be there, this is at /var/www/html, that is where amazon says to put the files.

enter image description here

Here's my icon code, it's placed in the <head> element. 

<!-- Icon code -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icons/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/icons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/icons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/icons/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/icons/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/icons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/icons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/icons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/icons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/icons/mstile-310x310.png" />
<!-- End Icon code -->

Thanks for your time and help!

My website is at IP 54.213.219.247

Solution

  • Favicons don't work local (your website must be hosted in a server). If it is already online, the problem is probably a wrong path to the files (test it writing the complete path on the url bar example yourwebsite.com/icons/favicon-128.png).