ARTICLE AD BOX
I feel like I have tried everything.
I am using Safari.
I am trying to make my favicon .svg to show up on my portfolio in GitHub pages.
The code in question is placed in the of my index.html
I have tried clearing my cache (many times)
I have cleared my favicon folder at ~/Library/Safari/Favicon Cache/
I am not using any libraries
Edit: I am now using Safari version 26.2, previously I was using 18.something which does not support .svg favicons.
I feel like I have tried every variation of the following:
<link rel="icon" href="myusername.github.io/portfolio/favicon.svg?v=1" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg?v=1" type="image/svg+xml" /> <link rel="icon" href="favicon.svg?v=1" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="favicon.svg" type="image/svg+xml" /> <link rel="icon" href="favicon.svg" type="image/svg+xml" /> <link rel="shortcut icon" href="favicon.svg" type="image/svg+xml" /> <link rel="icon" href="images/favicon.svg" type="image/svg+xml" />I have also tried variations on this:
<link rel="mask-icon" href="mask-icon.svg?v=1" color="#2149b5" />The .svg I am using is the following:
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.5 2.5H6.5V3.5H3.5V2.5Z" fill="black"/> <path d="M6.5 3.5H7.5V4.5H6.5V3.5Z" fill="black"/> <path d="M7.5 4.5H8.5V5.5H7.5V4.5Z" fill="black"/> <path d="M2.5 3.5H3.5V4.5H2.5V3.5Z" fill="black"/> <path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" fill="black"/> <path d="M3.5 8.5H4.5V9.5H3.5V8.5Z" fill="black"/> <path d="M4.5 9.5H5.5V10.5H4.5V9.5Z" fill="black"/> <path d="M5.5 10.5H6.5V11.5H5.5V10.5Z" fill="black"/> <path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" fill="black"/> <path d="M11.5 8.5H12.5V9.5H11.5V8.5Z" fill="black"/> <path d="M10.5 9.5H11.5V10.5H10.5V9.5Z" fill="black"/> <path d="M9.5 10.5H10.5V11.5H9.5V10.5Z" fill="black"/> <path d="M8.5 11.5H9.5V12.5H8.5V11.5Z" fill="black"/> <path d="M6.5 11.5H7.5V12.5H6.5V11.5Z" fill="black"/> <path d="M7.5 12.5H8.5V13.5H7.5V12.5Z" fill="black"/> <path d="M8.5 3.5H9.5V4.5H8.5V3.5Z" fill="black"/> <path d="M9.5 2.5H12.5V3.5H9.5V2.5Z" fill="black"/> <path d="M12.5 3.5H13.5V4.5H12.5V3.5Z" fill="black"/> <path d="M13.5 4.5H14.5V7.5H13.5V4.5Z" fill="black"/> <path d="M1.5 4.5H2.5V7.5H1.5V4.5Z" fill="black"/> </svg>What am I doing wrong? There is so much conflicting information about this online that my best guess is that it shouldn't matter exactly how the path is written, and that something else is wrong?
Edit: I assumed that I would be on the latest version of Safari, but that is apparently not the case. Now I have updated and I'm gonna keep trying now that it should theoretically work.
However, I would still be thankful if someone knowledgeable could definitively say what is correct and what isn't correct of the many variations of this I found online.
