WebsiteBaker Community Forum

WebsiteBaker Support (2.11.x) => General Help & Support => Topic started by: apple on June 04, 2024, 09:17:21 PM

Title: favicon
Post by: apple on June 04, 2024, 09:17:21 PM

Hi, where do drop or save the favicon? Thanks

Title: Re: favicon
Post by: sternchen8875 on June 04, 2024, 10:37:52 PM

for search engines the right place is in your root directory of this domain, but not every browser read it from there automatically. best method is a link in the head of your index.php (from the template) and with this link, you can set the path, so it doesn't matter, where you have the favicon, if the patzh is correct

Title: Re: favicon
Post by: apple on June 05, 2024, 10:47:56 AM

Hi,  How do you link with the index file? Is there is code or sample I can see?
Thanks

Title: Re: favicon
Post by: sternchen8875 on June 05, 2024, 11:44:10 AM

Here some ofiicial informations about the thematic -> https://www.w3schools.com/html/html_favicon.asp

pls remember: every kind of file-type needs a special call.

for example:
GIF

Code: [Select]

<link rel="icon" type="image/gif" href="THE_COMPLETE_PATH TO_THE_FILE/FILENAME.gif">
PNG

Code: [Select]

<link rel="icon" type="image/png" href="THE_COMPLETE_PATH TO_THE_FILE/FILENAME.png">
ICO

Code: [Select]

<link rel="icon" type="image/x-icon" href="THE_COMPLETE_PATH TO_THE_FILE/favicon.ico">
SVG

Code: [Select]

<link rel="icon" href="THE_COMPLETE_PATH TO_THE_FILE/favicon.svg" type="image/svg+xml">
you can use the WB-Constant WB_URL or TEMPLATE_DIR in the path
WB_URL is the path to the root of this WB-Installation
TEMPLATE_DIR is the path to your on this page active frontend-template

example for favicon.ico in the root

Code: [Select]

<link rel="icon" type="image/x-icon" href="<?php echo WB_URL; ?>favicon.ico">or (short version)

Code: [Select]

<link rel="icon" type="image/x-icon" href="<?= WB_URL; ?>favicon.ico">
example for favicon.ico in your frontend-template

Code: [Select]

<link rel="icon" type="image/x-icon" href="<?php echo TEMPLATE_DIR; ?>favicon.ico">or (short version)

Code: [Select]

<link rel="icon" type="image/x-icon" href="<?= TEMPLATE_DIR; ?>favicon.ico">
also possible

Code: [Select]

<link rel="shortcut icon" href="<?= TEMPLATE_DIR; ?>favicon.ico" type="image/x-icon">
P.S.: its a good solution, if you have a favicon.ico in the root fot the automatic browser detection and if you need, another icon (like the apple-touch-icon) in your frontend-template

apple use a special form and call it "apple touch icon". it has more possibilities about size and resolution. You can use both kind of icons

Code: [Select]

<link rel="apple-touch-icon" href="<?= TEMPLATE_DIR;?>apple-touch-icon.png">

Title: Re: favicon
Post by: apple on June 23, 2024, 11:29:48 PM

Thanks. Do you mean the index.php in the template directory?

Title: Re: favicon
Post by: sternchen8875 on June 24, 2024, 12:01:04 AM

Quote from: applepie on June 23, 2024, 11:29:48 PM

Thanks. Do you mean the index.php in the template directory?

YES - the index.php of the used frontend-template, for example index.php in /templates/DefaultTemplate

if you use more than one template in your project, add it in every index.php from every installed frontend-template

Title: Re: favicon
Post by: apple on June 24, 2024, 12:21:52 AM

Quote from: sternchen8875 on June 24, 2024, 12:01:04 AM

Quote from: applepie on June 23, 2024, 11:29:48 PM

Thanks. Do you mean the index.php in the template directory?

YES - the index.php of the used frontend-template, for example index.php in /templates/DefaultTemplate

if you use more than one template in your project, add it in every index.php from every installed frontend-template

Thank you for your prompt reply. That was very helpful.