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: !

2 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