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