Web

Your Own Logo and Favicons — bootScore Helps!

/ by Karsten Reincke | Leave a comment

A word cloud forming the word WEB

No web­site with­out pic­tures or logos! But inte­grat­ing a logo cor­rect­ly is often a tricky task. They have to be vis­i­ble, well-placed, and leave space for the menu. Addi­tion­al­ly, they must not bloat or dis­tort the head­er area. And the way of inte­grat­ing them into the tem­plates should also allow us to use the fav­i­cons for the brows­er tabs etc. This is where the bootScore devel­op­ers took a lot of the work out of our hands! Once our logos rough­ly fit the intend­ed dimen­sions, we essen­tial­ly need to fol­low the bootScore instruc­tions. And by that, we get a logo and the respec­tive fav­i­cons.

[ en | de ]

Solution

  • Cre­ate your own reg­u­lar logo, prefer­ably as an SVG.
  • Cre­ate your own small­er logo, prefer­ably as SVG.
  • Copy your reg­u­lar logo to bootscore-child/img/logo/logo.svg.
  • Copy your small­er logo to bootscore-child/img/logo/log-sm.svg.
  • Also, fol­low the instruc­tions to cre­ate the respec­tive [favicons](https://bootscore.me/documentation/header-php/

Background

The logos are dis­played by the nav area of the file header.php and are held in a con­tain­er, which also has to man­age the menu etc. The respec­tive img tags used in it do not spec­i­fy any heights or widths. Thus, the icons are dis­played in the dimen­sions they were designed with. This is also true for SVG images. So: the high­er the gen­er­at­ed logo, the high­er the NAV area; the longer the logo, the more the fol­low­ing ele­ments are shift­ed to the right.

This is not a dis­ad­van­tage, but a lean solu­tion. After all, logos that are dis­played on every page are wel­come to be more dis­creet. The read­er will also notice small­er ver­sions. I, at least, have had good expe­ri­ences with the fol­low­ing val­ues:

  • 132x27 pix­el and 76x27 pix­el (bootScore logo.svg and logo-sm.svg)
  • 131x46 pix­el and 48x56 pix­el (logo fodina.de)
  • 102x57 pix­el and 54x54 pix­el (logos karsten-reincke.de)

After cre­at­ing the fav­i­cons, the user should — accord­ing to the header.php-Docu — adopt cer­tain val­ues. The spec­i­fied line num­bers refer to the file header.php as it has ini­tial­ly been sup­plied by bootScore, not to the gen­er­at­ed fav­i­cons: Of the files cre­at­ed by the real­fav­i­con­gener­a­tor, only the file site.webmanifest shall be mod­i­fied by remov­ing the pre­ced­ing slash­es of the absolute paths.

To per­form the rec­om­mend­ed fav­i­con check, the gen­er­at­ed files must be import­ed into a (pre) pro­duc­tion sys­tem so that the URL of the site can be hand­ed over to the https://realfavicongenerator.net/favicon_checker. Cur­rent­ly1, this check dis­cov­ers errors relat­ed to the files gen­er­at­ed by the real­fav­i­con­gener­a­tor itself: well, a bit aston­ish­ing, isn’t it?

And how does this …

… sup­port our migra­tion to bootScore? Well, once start­ed with improv­ing the image han­dling, a web design­er will also notice the blurred ‘fea­tured images’ of bootScore. She will try and refine solu­tions. And she may also tack­le them with new HTML‑5 tech­niques. Because with that, a fanci­er image strat­e­gy com­bined with an inte­grat­ed license ful­fill­ment process and its own logo will real­ly make sense. How­ev­er, pic­tures bring col­ors to read­ing. So they should be inte­grat­ed into a cus­tomized col­or con­cept. This post also con­tributes some­thing to this top­ic.

  1. as of 03/03/2013 [↩]
To top