Can’t Seem to Get Favicon Working

Code Help HTML/CSS/JS
1

Question:
So I am making a website and I am trying to get a favicon on it, but no matter what I do it never works and I can’t see the favicon.

Repl link:
https://replit.com/@SalladShooter/AreaKnowledge
https://areaknowledge.salladshooter.repl.co/

HTML:

<link rel="icon" href="https://replit.com/@SalladShooter/AreaKnowledge#favicon.ico" type = "image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon">

IMAGE:
AreaKnowledge Logo

1 Like
2

This won’t work, as that just leads to a webpage

Either way, it’s working just fine for me.

image

I think there’s always been some issues with favicons. Usually if you just name it favicon.ico and put it in the root directory then some browsers will auto-detect it and put it on there. Others require a different declaration than

I think that one works for Microsoft Edge, but my guess is that you’re using Google Chrome so it doesn’t work. I believe the other code you need to put is this:

<link rel="shortcut icon" href="http://www.urloftheimage.com/image.png" type="image/x-icon">

And remember to do away with your first one.

1 Like
3

I am using Safari, also would a PNG work instead of using a .ico

4

I have it as this know for my code:

<link rel="shortcut icon" href="https://replit.com/@SalladShooter/AreaKnowledge#images/AKLogo.png" type = "image/x-icon"> <link rel="icon" href="images/AKLogo.png" type="image/x-icon">

Or should it be like this:

<link rel="shortcut icon" href="images/AKLogo.png" type="image/x-icon">
5

You shouldn’t be using a PNG. It should be an ICO file.

Use both

<link rel="icon" href="favicon.ico" type="image/x-icon">

And

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

That’s what I’d try. And then make sure to keep favicon.ico in your root directory at all times

6

Though I don’t have links off the top of my head, I know for a fact that some sites use a PNG as their favicon.

1 Like
7

@boston2029 It still isn’t working. Is it because I use Safari?

8

I often use png instead of ico because too lazy :upside_down_face:

9

Probably, Safari have some badblood with .ico files.

You can try explict path like:

<link rel="icon" href="https://areaknowledge.salladshooter.repl.co/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://areaknowledge.salladshooter.repl.co/favicon.ico" type="image/x-icon">
1 Like
10

@WindLother that doesn’t seem to work either.

11

SalladShooter On my iPad, I can see your favicon.
IMG_4101

12

@pman10 Im on an iPad and cant seem to see it. It shows this
IMG_0364

13

It may be displayed by deleting the cache in iPad.

14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.