Favicons

After coming across this wonderful favicon generator site it would be great to have a way to actually get the generated assets in place on the server. Might be time for me to look at setting up the GoDaddy server space I keep paying for (for some reason) and play around with hooking that up to Micro.blog (which I believe is within the realm of possibility unless I am misremembering the documentation I read a while back).

Update: it looks like a little time at least got the Safari icon to update:

Curious: are you able to upload the icon to your Micro.blog?

Yes-- you can upload an image and reference it in the HTML in your <head>. I’m not sure if any of the built in themes make this easy to support or if it requires customizing your theme (probably in the base_of.html template.

Verified. I just woke up so I plan to update this reply once the Adderall kicks in. I have learned various methods of getting files uploaded (some are temperamental) and I totally took the marfa theme apart and put it back together to understand how Hugo worked so I could likely assist with a light modification of a currently used theme as well.

(Since I managed to split my favicon dialogue I wanted to repeat what a left elsewhere before talking uploads)

I started a topic the other day without realizing y’all were talking favicons over here. Came across an awesome site for generating/testing favicon for various platforms.

Safari was really slow to ditch it’s cache on the iPhone and still wants to be fussy on iPad but I trust that I have what I need in place for . The other two platforms seemed to want files we are unable to upload or that they require within the root directory.

I set out trying to get the pretty icon in my Safari favorites and home screen.

Of the package the site generated for me, this is what I kept as functional:

    <link rel="shortcut icon"
             href="https://moondeer.blog/uploads/2021/5260d2013e.png"  
            type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="180x180"   
            href="https://moondeer.blog/uploads/2021/5260d2013e.png">
    <link rel="icon" type="image/png" sizes="32x32"   
             href="https://moondeer.blog/uploads/2021/91b72102d1.png">
    <link rel="icon" type="image/png" sizes="16x16" 
             href="https://moondeer.blog/uploads/2021/df2e80d9c3.png">
    <link rel="mask-icon" 
            href="https://moondeer.blog/uploads/2021/3b64fed44b.svg" 
           color="#4a577c">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#da532c">

Later that day the iPhone finally came around:

image

Okay, the actual update:

Everything that I ended up referencing above I successfully uploaded to the server. The stuff I cut out of what the favicon site generated for me I wasn’t sure about (things like the manifest file). For reliably uploading images I trust the Micro.blog web interface and an iOS app named Mimi (the iOS Micro.blog app I have found to be less stable with regard to showing me what has been uploaded and with a weird bug where previously uploaded images were being lost (which my only guess has been naming collisions)).

If I am uploading something a little unusual, I always use the Micro.blog web interface (nobody tell manton but I was uploading videos by moving them into iOS Files and then selecting them via the browse option even before I upgraded to premium on account of feeling guilty). When I want the location of the uploaded file, I force touch the uploaded file and select copy (iOS, point is the uploads page is showing you what you uploaded whether it knows what to do with it or not).

Holler if you want me to take a peek your theme of choice and I can help with a safe attempt at getting what you have managed to upload into your theme’s template.

1 Like

I tried your tip, and I got almost there. Since I have a lower tier account ($5/mo), I couldn’t upload the SVG file. The other files, like the manifest file, etc. I couldn’t upload either. So I didn’t get a perfect score for favicon support, but it has improved somewhat, on my site https://www.loopgenot.me

I suppose this is to be expected with a managed system like MB; you don’t have full access to the server.

It would be nice, though, if @manton or @vincent added a favicon function to the site design, so full favicon support for all current platforms could be implemented easily, based on a minimum size image.

That’s weird. I’m also on the basic $5 plan, but SVG uploaded just fine for me. I did observe some other quirks, though.

Uploads from the web app

  • .svg, .png, .jpg, and .xml files work as expected.
  • site.manifest is converted into a broken .jpg file (strange).
  • Renaming site.manifest to site.js before uploading works.
  • The .ico file is converted into a working .jpg.

Uploads from the Micro.blog app for iOS

Behavior is the same as for the web app. With one exception: site.webmanifest can’t be uploaded at all. It’s not even selectable in the file picker. Unless one renames it to site.js first, then it can be picked and uploaded.

Alternative for text-based files

Text-based files like browserconfig.xml and site.webmanifest can also be “uploaded” by adding them as templates to your custom theme. First, go to Design → Edit Custom Themes → [Your Custom Theme Name]. Then click on the New Template button.

Enter the desired path and filename (they should go somewhere into the directory static) and the file’s content. Something like this:

The file pictured in the screenshot above is then available at https://your-name.micro.blog/site.webmanifest.

In conclusion

I managed to deploy all files generated by realfavicongenerator.net with one exception: favicon.ico. I have a hard time coming up with a workaround for that one. :blush: One could host the favicon.ico somewhere else and then set up a redirect /favicon.ico pointing to it. But that’s pretty silly.

1 Like

I can upload the .SVG, but I don’t get a download link.

I solved it by revealing the properties and copy the direct link to the .SVG file.






NB. Uploading images to this forum is very buggy.

Here are the screenshots I made of both the favicon service and my MB Theme (basic on Arabica).

One out of five tests is green, which means you’re 20 % there already. :blush: You just have to figure out what is wrong with the other four. Let’s do the first one together: iOS Safari. The error message says:

Image https://www.loopgenot.me/uploads/2021/8dc49beb43.svg is ill-formed

The iOS Safari icon is set up by this link element:

<link rel="apple-touch-icon" sizes="120x120" href="https://www.loopgenot.me/uploads/2021/8dc49beb43.svg">

Here it becomes apparent what’s gone wrong. That link should be pointing to a 120×120 .png, but instead, it’s pointing to a .svg. Upload the correctly sized .png, change the URL, and iOS Safari should turn green. :white_check_mark:

Then it’s just a matter of doing more detective work to eliminate the other three errors. I’ve confirmed on my own Micro.blog that it’s possible to make it green all the way. :blush:

1 Like

Okay, that one worked. Thanks. The rest is up to experimentation, because, again, I have no idea what I’m doing, nor do I seem to learn anything from doing this.


Update: Yay, fully compliant, except the favicon.ico file :pensive:

Trick is to plan this carefully, put the three files into a text editor, upload the images one-by-one, noting what the name change is from the files, and change it accordingly. Then modify the text of head.html, and the static files.

I thought, I just do this. Wrong idea.

1 Like

Nice workaround with the static text files, hadn’t thought of that.

1 Like