CODEWITHSUNDEEP
htmlfaviconweb-standards
Wolfpack'08
Wolfpack'08

Reputation: 4128

Favicon is completely transparent?

There's an indentation indicating that my favicon was loaded, but instead of seeing the favicon, I see a completely blank region where the favicon should be. The image is 38x48, but I also tried 32x32. It's about 10kb for the 48x48, 5kb for the 32x32. It's certainly not a blank/transparent image.

This is what I see when I load the favicon: an browser-bar tab is shown with an indentation where the favicon should be.

This is what I see when I load no favicon: a browser-bar tab is shown with no indentation, indicating that no favicon was loaded.

Can you see the difference? I should be seeing a picture of a leaf swaddling a baby's cheek with bird saliva that's been transformed into honey.

*I put this under compliance because I thought it might be an issue of the image size, dimensions, or something else very nitche.

Here's the head. I wonder if it's because I'm in China and W3C may not be accessible.... I'm going to try quirks mode, next.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <title>...</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    <link rel="icon" type="image/x-icon" href="/index.ico" />
<!-- Style link START -->
    <link rel=stylesheet media="screen" type="text/css" size="48x48" href="screen.css">
<!-- Style link END -->
</head>

Upvotes: 2

Views: 2342

Answers (3)

Wolfpack&#39;08
Wolfpack&#39;08

Reputation: 4128

I believe it's some cache issue because the problem resolves itself over time. I've tried changing the favicon, and it doesn't change until a significant amount of time elapses. I'd like to learn more about this behavior and understand why it occurs.

Upvotes: 0

Daniel Alsaker
Daniel Alsaker

Reputation: 193

I tested this myself to see if I could get it to work. It did not work with an ico file named "index.ico" However, it did work when I renamed the ico file to "favicon.ico". if that does not work you can also try with other file formats. PNG and JPG always work for me no matter the name.

Also make sure that your ico file is converted correctly and that you have not just renamed it to an ico file. There are many converters out there where you can convert other images files to ico files.

Edit: Afterwards I tried with several different random names and they all worked, all except from index.ico

Upvotes: 1

Razetime
Razetime

Reputation: 216

Favicons have to be of various sizes for different types of browsers. It's important that the sizes are correct for each browser. You seem to be using mozilla, so use an image which is either:

  • 16 x 16
  • 32 x 32
  • 48 x 48
  • 62 x 62

All in pixels. Here's the code: 

<!-- For IE 11, Chrome, Firefox, Safari, Opera -->  
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

Hope this worked.

Upvotes: 1

Related Questions