Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Branding: Theia should has favicon icon #3600

Open
AndrienkoAleksandr opened this issue Nov 23, 2018 · 14 comments
Open

Branding: Theia should has favicon icon #3600

AndrienkoAleksandr opened this issue Nov 23, 2018 · 14 comments
Labels
design issues related to design enhancement issues that are enhancements to current functionality - nice to haves

Comments

@AndrienkoAleksandr
Copy link
Contributor

Branding: Theia should has favicon icon.
@AndrienkoAleksandr AndrienkoAleksandr added the enhancement issues that are enhancements to current functionality - nice to haves label Nov 23, 2018
@sr229
Copy link

sr229 commented Nov 25, 2018

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

@kittaakos kittaakos added the design issues related to design label Nov 26, 2018
@vince-fugnitto
Copy link
Member

@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
Copy link
Contributor

can you perhaps share on how gitpod achieved this

I do not know.

@svenefftinge svenefftinge mentioned this issue Jan 2, 2019
Closed
@vince-fugnitto vince-fugnitto mentioned this issue Jan 4, 2019
Closed
@vince-fugnitto
Copy link
Member

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

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
Copy link

ektek commented Sep 7, 2019

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

@binary-person
Copy link

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
Copy link

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
Copy link
Contributor

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

@vince-fugnitto
Copy link
Member

@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
Copy link
Contributor

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
Copy link

Hello everyone! Any news about favicon?

@msujew
Copy link
Member

msujew commented Jun 24, 2023

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

@hkuich
Copy link

hkuich commented Jun 26, 2023

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
Copy link

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

@msujew Thanks, that is works!

@JonasHelming JonasHelming mentioned this issue Aug 8, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design issues related to design enhancement issues that are enhancements to current functionality - nice to haves
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests