Add Logo to Title Bar

Hello, I want to create a website. How I can to add a logo to site’s title bar from my project’s images? (example: link rel=“icon” href="/img/icon.png")

Hey @eray6421,

There are actually two ways to add a favicon to a website.

<link rel="icon"> tag

Simply add the following code to the <head> element:

<link rel="icon" href="http://example.com/favicon.png">

PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.

Note that you don’t have to precede icon in rel attribute with shortcut anymore. From MDN Link types:

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 .

favicon.ico in the root directory

From another SO answer (by @mercator):

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link> .

So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn’t allow you to use a PNG icon.

See also favicon.png vs favicon.ico - why should I use PNG instead of ICO?

1 Like

Okay, thanks you :smile:

Can I do this with images in my project? If I can, how?

The cool little icon that shows up in each web page’s browser tab is called a “favicon” . Adding this tiny detail really gives your website a professional appearance in the browser. Here’s how to do it – and this works with older versions of IE, unlike other solutions I’ve found on the Internet!

First, you’ll need to generate the artwork. Keep in mind that it will be reduced to a 16 x 16 pixel square, so it can’t be too detailed. To allow for higher resolutions in the future, I generate it as a 32 x 32 pixel image. The browser will reduce it as needed. Create your icon and save it as a .png file.

Update

The browser makers have standardized and now you just need one snippet of code and one icon file type. The following piece of code in the section of your site will work for the latest versions of all major browsers now:

Substitute your 32 by 32 pixel.png image path inside the href.

If you’re interested in older browser backward compatibility, read on!

The Original Article

Note: this section applies to older browsers only. You no longer need to do this for the latest browsers!

For compatibility with IE and Chrome, you’ll also need a .ico version of the icon. Not to worry, this is a common need and there is a website just for doing that: convertico.com. Type in the path to your .png file and hit GO. A link to download the .ico file will appear to the right.

Upload these icon files to your server. I usually put them in the images directory.

Next, add the following lines to the portion of your website assuming that they are stored in the images directory of your website:

<!-- Hide this line for IE (needed for Firefox and others) --><![if !IE]><link rel="icon" href="http://yourwebsite/images/favicon.png" type="image/x-icon" /><![endif]><!-- This is needed for IE --><link rel="shortcut icon" href="http://yourwebsite/images/favicon.ico" type="image/ico" />

If you are using WordPress, the section is defined in the header.php file located in wp-content/themes/your-theme-name/.

Now some explanation about the conditional “if” statement. Through trial and error, I found that the .ico file does not work with Firefox, and that the .png file works with all browsers except for IE, which chokes if it sees the .png file. Hence the conditional browser comments. Also, I’m talking about IE9 here. Earlier versions of IE are even worse. Some require the .ico file to be in the root of the hosted directory. I leave that to those who want to do the research. If there’s anyone who knows of a single method that covers all browsers, please comment below, however, I have not found a more complete description of how to do this in my Internet searches.

One Important Caveat

Note that all browsers employ caching when it comes to images, including the icon image. So, when you’re testing this you’ll need to clear your browser cache whenever you change the icon.

Hope this helps!

1 Like

Sorry, I want to do this on my Glitch Project’s images. Do you know this? Because URLs sometimes can be very long.

To get the image from specified path you’ll have to add the image path to the href string.

I have done this, but the image didn’t show on title bar.
<link rel="icon" href="/favicon.png">

Hey @eray6421, When you upload image on glitch, it goes to assets folder. To access, image from there, go like this

  • Go To Assets image
  • Then select the picture you would like to set as Favicon.
  • It will show an image URL. Something Like This
  • Copy That.
  • Paste it here
<link rel="icon" href="copied Assets URL">

No, I want to do this without URL. As this:

<link rel="icon" href="/img/icon.png">

Hey there, this is the snippet that I use whenever I need to configure a favicon:

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/glitch/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/glitch/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/glitch/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/glitch/favicons/favicon.ico"/>

This should work just fine, if you’re doing it properly and correctly, that is.

You need to use .png in FF, Chrome, and Opera and support them with 2 resolutions, for different devices and screen resolutions.
IE needs the .ico Image and needs the rel to be “icon” and “shortcut icon”.

Happy Glitching!

1 Like

It didn’t worked, sorry for many fails. Can you help me in my project if I send my project’s editing URL?

It’s been a while, @eray6421!

Please message me the project’s collaboration URL and I’ll further look into ‘why it is not working’ or ‘what you are doing wrong’.

Happy Glitching!

Hello again, dude. Can I do this with GitHub?

@eray6421 can you explain what you mean by “with Github”? If your project were hosted on Github, (i.e, using gh-pages) you would be able to set your favicon in the ways described above, but I think that @chroventer’s explanation above should also do what you want. Please feel free to message me the collaboration url if you want me to take a look!

Also, just out of curiosity, is there a specific issue with using the url for the favicon, or is it just a personal preference?

But how exactly do you add it to the website tab so the image shows up for people to see even if they are on another tab? I’m confused on what to do and where to place the code. I have tried placing it in different areas in my code to see if it works, but I have no had any luck so far. I want the image to appear right there where the little earth image is at.

image|233x28

in the href=“” remove the link and put your image link

1 Like