Favicon Doesn't work

Tried doing this: <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />, doesn't work though and my logo doesn't show up.
62 Replies
Jochem
Jochem9mo ago
where is your favicon.ico, and what's the url of the page you're including that on?
argbet
argbet9mo ago
Root directory
ἔρως
ἔρως9mo ago
also, how did you made the .ico file?
argbet
argbet9mo ago
svg -> ico converter And localhost Didn't upload site yet
ἔρως
ἔρως9mo ago
yeah, dont do that
Jochem
Jochem9mo ago
ok, what's the full URL on localhost?
ἔρως
ἔρως9mo ago
can you access the file by the url?
argbet
argbet9mo ago
How else do I get the ico file?
Jochem
Jochem9mo ago
no sub page? nothing like http://127.0.0.1:5000/hello/world/ or anything? http://127.0.0.1:5500/favicon.ico <-- does that work?
ἔρως
ἔρως9mo ago
^ this
argbet
argbet9mo ago
Yep, although, it looks super shrunk.. Yep My localhost? Nope
ἔρως
ἔρως9mo ago
then you dont have a valid .ico file also, just use a png
argbet
argbet9mo ago
Wb an svg? Or no?
ἔρως
ἔρως9mo ago
32x32 png you can pick between a .ico generated by gimp or a png those are your choices
Jochem
Jochem9mo ago
also, this should be enough and might work better:
<link rel="icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />
ἔρως
ἔρως9mo ago
that too
argbet
argbet9mo ago
PNG looks skewed? Ohh, it gotta be specifically 32x32?
ἔρως
ἔρως9mo ago
thats because you did it wrong yes
Jochem
Jochem9mo ago
(also, see how this isn't a short question?)
argbet
argbet9mo ago
Damn, yeah
ἔρως
ἔρως9mo ago
by the way, its "shortcut icon"
argbet
argbet9mo ago
Aw man, there's a problem The inherent aspect of my logo is not 1:1 So forcing it into 32x32 makes it look messed up
ἔρως
ἔρως9mo ago
add whitespace or simplify it
argbet
argbet9mo ago
The logo?
ἔρως
ἔρως9mo ago
yes
argbet
argbet9mo ago
Aight, I'll do that
Jochem
Jochem9mo ago
it's not, shortcut is allowed as a backwards compatible fallback, but you can safely omit it
ἔρως
ἔρως9mo ago
oh, you're right i would keep it anyways since it doesnt hurt
Jochem
Jochem9mo ago
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon Honestly would recommend not keeping it:
Note: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
it's extra cruft, it's deprecated, and might cause issues in the future.
argbet
argbet9mo ago
Okay uhh I have it as a png file Made it have dimensions of 32x32 Have my code as this: <link rel="icon" type="image/x-icon" href="./favicon.png" /> Still doesn't work Should I send my logo?
Jochem
Jochem9mo ago
remove the type a png isn't an image/x-icon, so it could be messing it up and you don't need it
ἔρως
ἔρως9mo ago
yup, remove the type
argbet
argbet9mo ago
What if I had the type as: type="image/png"?
ἔρως
ἔρως9mo ago
also, remove the dot in the path no, remove it browsers are smarter than us they can figure out it is a png
argbet
argbet9mo ago
Ah okay
ἔρως
ἔρως9mo ago
DO THIS! and it has to work you have ./favicon.png that dot there means "current folder" so, if you are in localhost/cookies, it will look for the image in localhost/cookies/favicon.png
argbet
argbet9mo ago
Okay, it worked, but then I went back into Figma to add a transparent background to the logo and when I tried again with the new logo, it didn't work? Weird..?
Jochem
Jochem9mo ago
sounds like you messed up the logo file?
argbet
argbet9mo ago
Hmm, perhaps It's still 32x32 though, just with a transparent (instead of the previously white) background 🤷‍♂️
ἔρως
ἔρως9mo ago
it might have worked but you made the logo into a 1x1 area with the rest as transparency if it is a vector, you can just save it and it shouldnt have a background then use a competent image editor to load the svg (it can be gimp, photopea, photoshop, anything)
argbet
argbet9mo ago
Na, it was a PNG I used Figma
ἔρως
ἔρως9mo ago
in there, set the image size to 30 of the longest dimension then on the program, you can just resize the canvas to 32x32 and center the logo and done! transparent png 32x32 with a 1px gap around (so it doesnt look too big and weird on the tabs)
argbet
argbet9mo ago
Okay.. I just observed weird behaviour I got it working again Didn't do anything to the file other than changing the name Didn't work All I did was a name change
ἔρως
ἔρως9mo ago
dont change the name of the file
argbet
argbet9mo ago
It should stay favicon?
ἔρως
ἔρως9mo ago
it has to be favicon.png
argbet
argbet9mo ago
Why?
ἔρως
ἔρως9mo ago
it's not a "should", it's a "must"
argbet
argbet9mo ago
And must it be in the root directory or can I move it somewhere else?
ἔρως
ἔρως9mo ago
you can move it, but it should be in the root you can set a redirect to the new location as well, in case any browser tries to be stupid smarter than us
argbet
argbet9mo ago
I see
Jochem
Jochem9mo ago
Does it? I thought you could change it as long as you also change the link's href?
ἔρως
ἔρως9mo ago
yes, but if it is in the root, and the link is wrong in the href, you must have a favicon.png or a favicon.png there browsers always look there first
Jochem
Jochem9mo ago
ah, yes, that's definitely true it's best practice to call it that anyway, even with the link set up correctly unless you have a good reason not to, and "I don't like the filename" isn't a good reason
ἔρως
ἔρως9mo ago
there are no good reasons to change the name never found one, at least unless you want to change the favicon in javascript
Jochem
Jochem9mo ago
multiple applications installed on the same domain, each with their own favicon. maybe. but then you'd just put a favicon.png in each folder
ἔρως
ἔρως9mo ago
and those would have their own sub-domain anyways, unless you love to suffer
Jochem
Jochem9mo ago
oh, I do love to suffer. But we're getting off topic
ἔρως
ἔρως9mo ago
yes just keep it "favicon.png" you should keep it in the root, but a redirect is fine
argbet
argbet9mo ago
Update: the thing which did it was to clear cache and restart Chrome (close and open it up again) The restarting Chrome is extra important
ἔρως
ἔρως9mo ago
press ctrl+f5 on an incognito tab should do the trick
Want results from more Discord servers?
Add your server