I want to add a favicon to my Glitch website. How do I do this?

I just joined Glitch and know almost nothing but I need a favicon. Can you please explain in really simple terms where to put the code and what the code is? Thank you.

It’s the same for all sites, no matter what the host. You can just Google “how to add favicon”.

The code will go between the <head> tags of your HTML file (the same place where the page title is set.) You’ll want to add something like this:

<link rel="icon" 
      type="image/png" 
      href="/location/myicon.png"
/>

The type value can be different depending on the type of image file you’ve used for your icon. For example, the boilerplate code your project might be using on Glitch might look more like this:

<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">

The href value should be a path to wherever your icon is stored, and then the icon file name. On Glitch, you might want to add the image to your assets, like here:

The image will appear in your assets tab – clicking on it will allow you to copy and paste a path to where Glitch has stored it. Paste that into the href space in your link tag. Now it should appear! Let me know if any of this is confusing or doesn’t apply to your issue :slight_smile: !

3 Likes

If you’re looking to create your own favicon, I think I’ve used this generator before! You can either draw one in the browser, or upload and adapt an image.

1 Like

Thank you! I’ve looked everywhere for this simple solution. All I found across internet are much more complex and bloated like using npm serve-favicon. It saved my day

1 Like

Can you please help me? The favicon doesn’t works for me.

<link id="favicon" rel="icon" href="https://cdn.glitch.com/2ee9225a-0a81-4703-8f9e-578c36a5ce5a%2Ffavicon.ico?v=1620993270440" type="image/x-icon">

image

There might be a problem with serving your icon from the Glitch CDN, but first, could you try removing ?v=1620993270440 from the URL, so that it ends with .ico?

P.s. Welcome to the Glitch forum :slight_smile:

Hello there. I have deleted the ?v=1620993270440 and it is now ends with .ico, but the favicon is still not working. Can you please help me?

Sure, let’s try. What’s your site URL, I’ll try it from here and see if I can figure it out.

Home · Nut Utilities (lightning-magic-lord.glitch.me)

Ok, two suggestions…

Your site has a load of code before the <html> opens, you should move the link tags from the top, into the <head>, merge the stuff from the <style> tags together in the head, put the button in the body.

I think this might help because currently, I can’t see a network request for the favicon that you specified, so I don’t think your link tag is getting read.

The other thing: when you load the site, you can see in DevTools that it looks for a favicon at /Favicon.ico which is the standard place to put it. So you could try uploading your favicon file to the root of the Glitch site as well.

So i have to copy the link tags before the <html> into the <head> and the button in the body?

Thank you! The favicon is now working!

1 Like

When i click on the image,it doesn’t show me the location,where exactly can i find its location?