Skip to content
Sign upLog in
← Back to Community

How add Favicon to index.html

Profile icon
TheAlexDev

I don’t know why my favicon is just the default “no favicon” favicon

Answered by Panquesito7 [earned 5 cycles]
View Answer
Voters
Profile icon
limatainer
Profile icon
BetsabeTrenado
Profile icon
Panquesito7
Profile icon
TheAlexDev
Comments
hotnewtop
Profile icon
Panquesito7

I had the same issue today. For me, it worked if you use a 32x32 icon. I hope that helps. 🙂

Profile icon
TheAlexDev

@Panquesito7
thank ya! :-)

Profile icon
Coder100

Hi! To use a favicon, you should read this article

So, for you:

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

The problem is that some things got cached, so hard refresh (usually ctrl+shift+r)

Profile icon
Dolemonkey

do near the top of the code

Profile icon
limatainer

Mine is like this and it does not works too
icon

Profile icon
gracehsiuliu

@limatainer
Try only using "/assets/favicon_io/favicon-32x32.png" (Index should be omitted)

Profile icon
TheAlexDev

You don’t really help me all you know is what I know to! My problem: favicon.ico is in the root
and it’s __up to 3 days __ago that I created the favicon.ico and added the -tag

Profile icon
greatusername

@Alexthe2739
I've run into this same problem and unfortunately I've found that the best way to fix this issue is to download all the files from replit, delete the entire repl, and create it again with a different name. Hope this helps!

Profile icon
xxpertHacker

First: eww, HTML is gross.

Secondly, if you're talking about the "favicon.ico", it must be accessible at the root directory of the website, which it properly is in your case.
At that point, the browser should request it automatically, all of the people here saying to use tags have no clue what they're talking about.

The only real problem here is that normally it takes a day or two to finally be recognized and fetched, after about a day it should work flawlessly, no extra effort required.

Forget about it today, tomorrow it should work just fine, if it doesn't come back, ping me (comment on this or get my attention), and I'll come to check if anything is wrong, but you shouldn't need to do anything except wait.

Profile icon
WSLTItanic

To add a favicon you have to upload the website to google buy paying or using repl.it or any other one like wix.com. I has tried it and it works it first was not but since I uploaded it in repl.it the favicon has appeared

If you feel this helpful please tick the tick mark

Profile icon
greatusername

@Alexthe2739
Did you run index.html before you added the favicon?

Profile icon
Whacko
<link rel="icon" type="image/gif" href="Index/Assets/Apple-Touch-icon.png"/>

You forgot the files.

Profile icon
realTronsi

@JavaMaster1
He is talking about the favicon, favicon.ico

Profile icon
TheAlexDev

@JavaMaster1
I wrote in line 10:

Profile icon
Whacko

@Alexthe2739
Oh I see. Favcions don't support .ico files, I think.

Profile icon
TheAlexDev

@realTronsi
your right!

Profile icon
realTronsi

@JavaMaster1
No the default favicon file is .ico

Profile icon
Whacko

@realTronsi
I think I'm right. Even
@Alexthe2739
agrees!

Profile icon
realTronsi

@JavaMaster1
He replied your right! to my post. But I'm telling you favicons support .ico files, at least check or google it before declaring that you're right lmao

Profile icon
TheAlexDev

@JavaMaster1
nope... that’s not because index.html is the only file where it doesn’t seems to work. try https://alex2739.alexthe2739.repl.co/ysgggvvddthcht

Profile icon
TheAlexDev

@realTronsi
your right @realTronsi

Profile icon
Whacko

@Alexthe2739
Oh. Well, I figured out why. You need all these <meta> stuff in the head:

<meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" />

Or at least I THINK that's what's wrong. Try it out.

Profile icon
realTronsi

@Alexthe2739
You do have a lot of favicon tags, which maybe is causing the problem.

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

Just try adding that and removing the other ones

Profile icon
TheAlexDev

@realTronsi
and
@JavaMaster1
Ok I try both

Profile icon
realTronsi

@JavaMaster1
I thought all the meta tags were already in the head but lmao

Profile icon
TheAlexDev

@realTronsi
and
@JavaMaster1
Nope both of them doesn’t seem to work

Profile icon
realTronsi

@Alexthe2739
Strange, btw why do you have two index.html

Profile icon
TheAlexDev

@realTronsi
the second index is a dir

Profile icon
Whacko

@Alexthe2739
Try renaming the file to favcion.png, I think it might work as a different file type.

Profile icon
Coder100

Nope, .ico files aren't supported in IE

@JavaMaster1

Profile icon
Whacko

@Coder100
What?

Profile icon
Coder100

And meta tags do not effect the favicon either

@JavaMaster1

Profile icon
Whacko
Profile icon
pxlmastr

@realTronsi
This worked for my website. I did this with a .png file:
`


`