No website without pictures or logos! But integrating a logo correctly is often a tricky task. They have to be visible, well-placed, and leave space for the menu. Additionally, they must not bloat or distort the header area. And the way of integrating them into the templates should also allow us to use the favicons for the browser tabs etc. This is where the bootScore developers took a lot of the work out of our hands! Once our logos roughly fit the intended dimensions, we essentially need to follow the bootScore instructions. And by that, we get a logo and the respective favicons.
- Create your own regular logo, preferably as an SVG.
- Create your own smaller logo, preferably as SVG.
- Copy your regular logo to
- Copy your smaller logo to
- Also, follow the instructions to create the respective [favicons](https://bootscore.me/documentation/header-php/
The logos are displayed by the
nav area of the file
header.php and are held in a container, which also has to manage the menu etc. The respective
img tags used in it do not specify any heights or widths. Thus, the icons are displayed in the dimensions they were designed with. This is also true for SVG images. So: the higher the generated logo, the higher the NAV area; the longer the logo, the more the following elements are shifted to the right.
This is not a disadvantage, but a lean solution. After all, logos that are displayed on every page are welcome to be more discreet. The reader will also notice smaller versions. I, at least, have had good experiences with the following values:
- 132x27 pixel and 76x27 pixel (bootScore logo.svg and logo-sm.svg)
- 131x46 pixel and 48x56 pixel (logo fodina.de)
- 102x57 pixel and 54x54 pixel (logos karsten-reincke.de)
After creating the favicons, the user should — according to the header.php-Docu — adopt certain values. The specified line numbers refer to the file
header.php as it has initially been supplied by bootScore, not to the generated favicons: Of the files created by the realfavicongenerator, only the file
site.webmanifest shall be modified by removing the preceding slashes of the absolute paths.
To perform the recommended favicon check, the generated files must be imported into a (pre) production system so that the URL of the site can be handed over to the https://realfavicongenerator.net/favicon_checker. Currently1, this check discovers errors related to the files generated by the realfavicongenerator itself: well, a bit astonishing, isn’t it?
And how does this …Bilder
… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. This post also contributes something to this topic.
- as of 03/03/2013