According to the Blocs documentation it’s recommended to use a PNG file 16x16 pixels for best results when creating a favicon, but I have an app called Icon Slate that creates favicons in a range of formats and sizes for different devices. I gather there are various free online alternatives. At https://realfavicongenerator.net they suggest best results come from a file that is 260x260 pixels or more.
Icon Slate will let you select formats for Windows, Apple and Android in different resolutions, then output a single large file, but serve the correct version for each user device. Does anybody know if a favicon in Blocs has to be PNG as suggested in the documentation or can we add alternative formats and sizes in the project settings?
OK that’s curious, I thought they had to be .ico for maximum compatibility, which is Windows based, though Apple uses .icns. As a feature request for @Norm how about a Web Clip option inside the project settings?
It’s a pretty old thread, but I think this fits the topic.
So I’m adding additional favicons to <head>. However, at the moment I cannot add the associated documents and images (e.g. apple-touch-icon.png, favicon.ico, manifest.webmanifest, …) to the document root directory via Blocs, but always have to export the Blocs project first and then manually copy the documents and images into the root directory, because I think there is no way to add images directly into the document root directory via Blocs. So @Norm it would be great if this could be done in Blocs directly.
They don’t have to be in the root as such. I normally place them all in a folder (much tidier) and the links are relative to the location. They are only uploaded once.
Yes I could do so, but I would like to have them in the root directory, because some tools, like RSS readers, just request /favicon.ico from the server and they don’t bother looking elsewhere.
@Ghost - Blocs already places the favicon in the main folder of its export AFAIK, thus, this is as roots as it gets for Blocs
Now, if you are exporting as a WP Theme for example then you are not creating a website, but a Theme.
Thus, Blocs can’t go more root than the folder it generates on export, which is the theme folder. And again in that folder favicon is placed at the most root position possible for the builder.
I don’t think there is any solution possible for this within Blocs, as it is not a website builder when it comes to those exports, but a theme builder.
So only when you export as WP Theme (and perhaps other CMS export, not sure) then you have to move the favicon upstream into root and change the call in the head tag to not point to template, but root path.
When you export bare HTML (quick or project export) you get a full “root” structure, where favicon is properly placed in its most parent folder/root
@smileBeda As I wrote before, I want to add additional images/ favicons as for example an apple-touch-icon, etc. Blocs only exports one favicon.png into root. I know what/where root is and I know where to put these additional images. Only thing I was suggesting was, if this could be done via Blocs. Because as it is right now, I have to put these additional favicons manually into the root directory (after exporting the project/website). Because this is currently not possible via the “Project Settings” > “Project Attachments” menu.
