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
where is your favicon.ico, and what's the url of the page you're including that on?
Root directory
also, how did you made the .ico file?
svg -> ico converter
And localhost
Didn't upload site yet
yeah, dont do that
ok, what's the full URL on localhost?
can you access the file by the url?
How else do I get the
ico file?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?
^ this
Yep, although, it looks super shrunk..
Yep
My localhost? Nope
then you dont have a valid .ico file
also, just use a png
Wb an svg? Or no?
32x32 png
you can pick between a .ico generated by gimp or a png
those are your choices
also, this should be enough and might work better:
that too
PNG looks skewed?
Ohh, it gotta be specifically 32x32?
thats because you did it wrong
yes
(also, see how this isn't a short question?)
Damn, yeah
by the way, its "shortcut icon"
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
add whitespace or simplify it
The logo?
yes
Aight, I'll do that
it's not, shortcut is allowed as a backwards compatible fallback, but you can safely omit it
oh, you're right
i would keep it anyways since it doesnt hurt
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.
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?remove the type
a png isn't an image/x-icon, so it could be messing it up and you don't need it
yup, remove the type
What if I had the type as:
type="image/png"?also, remove the dot in the path
no, remove it
browsers are smarter than us
they can figure out it is a png
Ah okay
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.pngOkay, 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..?
sounds like you messed up the logo file?
Hmm, perhaps
It's still 32x32 though, just with a transparent (instead of the previously white) background 🤷♂️
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)
Na, it was a PNG
I used Figma
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)
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
dont change the name of the file
It should stay favicon?
it has to be favicon.png
Why?
it's not a "should", it's a "must"
And must it be in the root directory or can I move it somewhere else?
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
I see
Does it? I thought you could change it as long as you also change the link's href?
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
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
there are no good reasons to change the name
never found one, at least
unless you want to change the favicon in javascript
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
and those would have their own sub-domain anyways, unless you love to suffer
oh, I do love to suffer. But we're getting off topic
yes
just keep it "favicon.png"
you should keep it in the root, but a redirect is fine
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
press ctrl+f5 on an incognito tab
should do the trick