Firefox favicon doesn't react to change

[ToniJ123]

Introduction

Firefox shows sqlpage default favicon in index.sql page even if favicon is set to another icon. Other browsers works just fine.

To Reproduce

Use Firefox and index.sql and custom favicon.

Thanks!

[endic-sam928281]

Hello, we tried to solve the issue.

This is what we did:

To fix the issue of Firefox not displaying the custom favicon, we're adding an explicit link to the favicon in the index.sql file. This should ensure that Firefox recognizes and displays the custom favicon correctly.

You can review changes in this commit: endic-sam928281@9edfd83.

Caution

Disclaimer: The concept of solution was created by AI and you should never copy paste this code before you check the correctness of generated code. Solution might not be complete, you should use this code as an inspiration only.

---

Latta AI seeks to solve problems in open source projects as part of its mission to support developers around the world. Learn more about our mission at https://latta.ai/ourmission . If you no longer want Latta AI to attempt solving issues on your repository, you can block this account.

[lovasoa]

Hi @ToniJ123 ! Can you provide a reproduction ? A sql file with an icon file that you are using, ideally

[lovasoa]

@ToniJ123 are you sure this isn't a cache problem ? Do you still see the problem after visiting the favicon's url directly and hard-refreshing the page ?

[ToniJ123]

Hi,

Closing with the issue root, if you have .sql file (page), which has card component, and it has embed element(s), and there is shell component in those embed pages, where favicon hasn't been presented as property, it will cause the main page to show default favicon in Firefox.

In other browsers it knows to use the main page favicon, but in firefox it behaves differently and the embed card pages without same selected favicon, cause default sqlpage favicon to shown.

Fix at the moment is to present the wanted favicon property in those embed card pages also, but is this wanted behaviour or wanted method? Can this favicon be inherited to embed card pages somehow, in a way that Firefox also understands it?

[lovasoa]

Hi, can you make a reproduction ? a set of .sql and .ico or .png files that reproduces the issue on a clean install?

[lovasoa]

@ToniJ123 : thanks for the reproduction.
In short, SQLPage is working as designed, but there is a misunderstanding about how embedding in cards works. I will clarify the documentation.

For reference, here is a minimal reproduction, based on the example that @ToniJ123 provided.

minimal reproduction of the issue

The following displays a gmail icon for x.sql in chrome, but not in Firefox.

File: x.sql

select 'shell' as component, 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico' as favicon;
select 'card' as component;
select 'xbed.sql' as embed;

File: xbed.sql

select 'shell' as component;
select 'text' as component, 'Hello, world!' as contents;

The confusion

The issue is with how the embed property of the card component works.
It expects a reference to just a series of components to display, not a full webpage.
To achieve that,

• one must pass the _sqlpage_embed URL parameter on the link if it's a link to another sql page,
• one must NOT use a shell component in the embedded page.

Not following these rules creates a syntactically invalid document, which may sometimes appear to work (although it has weird margins), but on which sqlpage and browsers themselves do not give any guarantee they will work.

Fix

So, the correct version is:

File: x.sql

select 'shell' as component, 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico' as favicon;
select 'card' as component;
select 'xbed.sql?_sqlpage_embed' as embed;

File: xbed.sql

-- no shell
select 'text' as component, 'Hello, world!' as contents;

This correctly displays the gmail favicon on all browsers.

[lovasoa]

I am closing this since the issue described here is not a bug in sqlpage, but I remain open to pull requests improving the ease of use of the embed parameter, in order to prevent others from making the same mistake in the future.

EDIT: I had a look at the code, and I will make things more intuitive in the next version to prevent this kind of mistakes. The _sqlpage_embed parameter will be added automatically, and the shell component in embedded pages will be ignored (with a console warning letting the developer know how to fix their code).

[ToniJ123]

Hi, just to know exactly how this should work, two extra questions

one must pass the _sqlpage_embed URL parameter on the link if it's a link to another sql page,

So should every embed card page pass this URL parameter, or does it cause problems? One at least, or one maximum?

one must NOT use a shell component in the embedded page.

It has to be this one, or these ones, which passes this _sqlpage_embed URL parameter? So others has to have shell component?

Just trying to figure how this works, what are the limitations, and is there some exact way of doing this, the best way?

[ToniJ123]

And also what about if you have page, where is embed page, and there is also card with embed page? So three layer consept? Is that recommended? And how you should use _sqlpage_embed URL parameter in this case?

[lovasoa]

Hi Toni ! I tried to write down the rules as explicitly as possible. Here is the result:

1. Set the Favicon on the Main Page

What to do:
Create a main file (for example, main_page.sql) that sets up the page frame. The "shell" is the outer structure of the page, including the page layout, title, and favicon (icon shown in the browser tab). There can be only one shell in a page, and it must be defined at the top.

Example (main_page.sql):

select 'shell' as component, 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico' as favicon;
select 'card' as component;
select 'embedded_section.sql?_sqlpage_embed' as embed;

Explanation:

• The first line sets the shell with your chosen icon.
• The third line tells SQLPage to include another file (embedded_section.sql) as part of the page. The ?_sqlpage_embed tells SQLPage to include the file inside the main page without adding another shell. This prevents the page from having more than one shell.

---

2. Do Not Use a Shell in the Embedded File

What to do:
In the file you embed (for example, embedded_section.sql), include only the content. Do not add another shell here. The _sqlpage_embed parameter tells SQLPage not to automatically add a shell, but you should not manually include one either.

Example (embedded_section.sql):

select 'text' as component, 'Hello, world!' as contents;

Explanation:

• This file only shows the content ("Hello, world!").
• If you add a shell here, it can cause errors or unwanted behavior. The main page’s shell is used for the entire page.

---

3. Always Use the Embed Parameter

What to do:
When referring to an embedded file, always add ?_sqlpage_embed at the end of its name.

Example:

• Incorrect:

  select 'embedded_section.sql' as embed;

• Correct:

  select 'embedded_section.sql?_sqlpage_embed' as embed;

Explanation:

• The ?_sqlpage_embed parameter tells SQLPage to treat the file as a part of the main page. This prevents problems (such as the wrong icon being shown) in some browsers like Firefox.

---

4. Multi-Level Embedding

What to do:
If a page embeds another page, which itself embeds a third page, ensure each level follows the same rules.

Example:

Main page (main_page.sql):

select 'shell' as component, 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico' as favicon;

select 'text' as component, 'Main content: page A' as contents;

select 'card' as component;
select 'page_b.sql?_sqlpage_embed' as embed;

Middle page (page_b.sql):

select 'text' as component, 'Embedded content: page B' as contents;

select 'card' as component;
select 'page_c.sql?_sqlpage_embed' as embed;

Inner page (page_c.sql):

select 'text' as component, 'Deeply embedded content: page C' as contents;

Explanation:

• main_page.sql includes page_b.sql.
• page_b.sql includes page_c.sql.
• page_c.sql contains only content.
• No extra shells are added beyond the main page.

This ensures a properly structured multi-level embedding system without conflicts.

However, please note that deep embedding is not tested or officially supported in SQLPage. Feel free to open bug reports with a clear and minimal reproduction if you encounter issues.

---

Summary

• Main page: Needs a shell to set the favicon.
• Embedded file: Should not have a shell.
• **Always use **_sqlpage_embed when embedding.
• Multi-level embedding: Each embedded page follows the same rules.
• Based on your feedback, the rules will be relaxed in the next version, in order to avoid confusion. SQLPage will add the ?_sqlpage_embed URL parameter automatically if you forget it, and will warn you if you mistakenly define an explicit shell in an embedded page.

Using these rules, your page will show the correct icon on every browser, and the embedded content will work properly.

[ToniJ123]

Thanks for awesome answer, there is no questions left for this, it's now very clear! Favicon+Firefox troubleshooting lead us to clarify correct embed card usage.