Favicons for every browser, smatphone tablet etc..

Discussion of non-phpBB related topics with other phpBB.com users.
Forum rules
General Discussion is a bonus forum for discussion of non-phpBB related topics with other phpBB.com users. All site rules apply.
Post Reply
User avatar
</Solidjeuh>
Registered User
Posts: 1147
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Favicons for every browser, smatphone tablet etc..

Post by </Solidjeuh> » Wed Aug 22, 2018 9:46 pm

I just found out you can now create "favicons" for every system!
And seems to be working great..
Maybe most of you already know this.. but maybe useful for others..

Link: https://www.favicon-generator.org/

2018-08-22 23 38 05.jpg
2018-08-22 23 38 28.jpg
2018-08-22 23 39 27.jpg
2018-08-22 23 39 27.jpg (14.56 KiB) Viewed 4300 times
We offer fun HTML5 games for young and old.
Register a free account & enjoy all functions!
Save your score, challenge other members or play along with our tournaments.


~~~ https://www.solidjeuh.be ~~~

User avatar
EA117
Registered User
Posts: 114
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Favicons for every browser, smatphone tablet etc..

Post by EA117 » Tue Oct 02, 2018 11:36 am

For what it's worth, one that I used on my recent phpBB upgrade was another one mentioned here in the phpBB forum, https://realfavicongenerator.net/

That one seemed to be really high-functioning, in the way that once you submitted your image, it provided live previews and further customizations of the images and data being generated for each target platform.

Was able to integrate almost everything as part of a custom phpBB style; except for favicon.ico, apple-touch-icon.png and browserconfig.xml which had to also be duplicated into the root of the web site, for agents which wouldn't have used or expected HTTP header-defined locations for these items.

afribf
Registered User
Posts: 10
Joined: Sat Aug 04, 2018 7:06 am

Re: Favicons for every browser, smatphone tablet etc..

Post by afribf » Mon Nov 19, 2018 4:57 pm

EA117 wrote:
Tue Oct 02, 2018 11:36 am
For what it's worth, one that I used on my recent phpBB upgrade was another one mentioned here in the phpBB forum, https://realfavicongenerator.net/

That one seemed to be really high-functioning, in the way that once you submitted your image, it provided live previews and further customizations of the images and data being generated for each target platform.

Was able to integrate almost everything as part of a custom phpBB style; except for favicon.ico, apple-touch-icon.png and browserconfig.xml which had to also be duplicated into the root of the web site, for agents which wouldn't have used or expected HTTP header-defined locations for these items.
Would you only need to create it and add it to the style sheet? Or are you supposed to add it some other way?

TIA

User avatar
EA117
Registered User
Posts: 114
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Favicons for every browser, smatphone tablet etc..

Post by EA117 » Mon Nov 19, 2018 6:03 pm

afribf wrote:
Mon Nov 19, 2018 4:57 pm
Would you only need to create it and add it to the style sheet? Or are you supposed to add it some other way?
You would likely end up adding it to the overall_header.html of the phpBB style you're using. Not just adding items to a literal CSS style sheet, if that's what you meant. Most all of the items would end up being <link> or <meta> items added to the <head> section of the overall_header.html.

For example, this is the section I ended up adding to my overall_header.html for the favicon assets generated for my site:

Code: Select all

<link rel="apple-touch-icon" sizes="180x180" href="{T_THEME_PATH}/images/apple-touch-icon.png?v=zXbdKz68p3">
<link rel="icon" type="image/png" sizes="32x32" href="{T_THEME_PATH}/images/favicon-32x32.png?v=zXbdKz68p3">
<link rel="icon" type="image/png" sizes="16x16" href="{T_THEME_PATH}/images/favicon-16x16.png?v=zXbdKz68p3">
<link rel="manifest" href="{T_THEME_PATH}/images/site.webmanifest?v=zXbdKz68p3">
<link rel="mask-icon" href="{T_THEME_PATH}/images/safari-pinned-tab.svg?v=zXbdKz68p3" color="#5bbad5">
<link rel="shortcut icon" href="{T_THEME_PATH}/images/favicon.ico?v=zXbdKz68p3">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Note the use of {T_THEME_PATH} was just because I was choosing to locate the assets within the style directory of my own custom style. You could just as easily have used paths that referenced files at the root of the web site, or where ever you had chosen to locate them.

Post Reply

Return to “General Discussion”

Who is online

Users browsing this forum: Affiliate Marketing and 35 guests