search

eclipse-theia / theia

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.
http://theia-ide.org
Eclipse Public License 2.0
19.59k stars 2.46k forks source link

Branding: Theia should has favicon icon #3600

Open AndrienkoAleksandr opened 5 years ago

AndrienkoAleksandr commented 5 years ago

Branding: Theia should has favicon icon.

sr229 commented 5 years ago

Not only that, we need a icon on the left pane just like Gitpod Theia.

vince-fugnitto commented 5 years ago

@kittaakos can you perhaps share on how gitpod achieved this? The only way I could see updating the icon in the menu-bar was by editing the css (theia-icon) from core.

kittaakos commented 5 years ago

can you perhaps share on how gitpod achieved this

I do not know.

vince-fugnitto commented 5 years ago

I was able to test and add a custom favicon to the main application by updating the frontend-generator.ts. Where we generate the <head></head> portion, I included the following link tag.

  <link rel="icon" href={url} type="image/x-icon">

The only issue I had was getting the image served by the server. When using an external image (such as one hosted already) the icon was displayed correctly.

![Screenshot from 2019-03-12 08-48-20](https://user-images.githubusercontent.com/40359487/54201299-aaf43580-44a3-11e9-8daa-3b82747f9aa6.png)

The next step would be to find out how to properly serve internal icons as a favicon and make it much easier for extenders to update it.

ektek commented 4 years ago

Thank you for opening this issue. Has there been any update on making it easy for extensions to set a favicon?

binary-person commented 4 years ago

For anyone that is desperate for a favicon, here's a little command you can run to add a favicon to your theia web ide:

cd your_theia_folder/lib && wget https://raw.githubusercontent.com/theia-ide/theia-apps/master/theia-electron/resources/icon.ico && sed -i 's/<meta charset/<link rel="icon" href=".\/icon.ico" type="image\/x-icon">\n  <meta charset=/' index.html
krishnagogada commented 3 years ago

It work for me in this method preloadTemplate. In package.json

"theia": {
    "generator": {
      "config": {
        "preloadTemplate": "preloadTemplate.html"
      }
    }
}

in preloadTemplate.html

<div>Loading view.......</div>
<script>
if (document.head) {
        let faviconLinkTag = document.createElement('link');
        faviconLinkTag.rel = 'icon';
        faviconLinkTag.href = 'http://your_favicon.ico';
        document.head.appendChild(faviconLinkTag);
    }
</script>
JonasHelming commented 1 year ago

@vince-fugnitto Do you have a preferred way to add a favicon to a custom product? If so, we should document it.

vince-fugnitto commented 1 year ago

@JonasHelming probably a good way to document it would be to include it as an example in theia-blueprint? It currently does not make use of the favicon (as can be seen in the browser's tab):

Screen Shot 2023-06-13 at 11 25 03 AM

JonasHelming commented 1 year ago

Yes, that makes sense. I was more interest in your view, which of the above described options to customize it you prefer as the officially documented one?

capsulated commented 1 year ago

Hello everyone! Any news about favicon?

msujew commented 1 year ago

@capsulated This topic has been effectively resolved in this comment.

hkuich commented 1 year ago

It work for me in this method preloadTemplate. In package.json

"theia": {
    "generator": {
      "config": {
        "preloadTemplate": "preloadTemplate.html"
      }
    }
}

in preloadTemplate.html

<div>Loading view.......</div>
<script>
if (document.head) {
        let faviconLinkTag = document.createElement('link');
        faviconLinkTag.rel = 'icon';
        faviconLinkTag.href = 'http://your_favicon.ico';
        document.head.appendChild(faviconLinkTag);
    }
</script>

Just to make sure: there is supposedly more in the preloadTemplate.html? I can't seem to get this to work... Would be very thankful for a helping hand for a Theia novice...

capsulated commented 1 year ago

@capsulated This topic has been effectively resolved in this comment.

@msujew Thanks, that is works!