How to set your micro.blog site's icon on Safari, Chrome and Windows
It also sets your web app's icon.
micro.blog automatically uses your account’s profile picture as your site’s logo and favicon. However, it doesn’t automatically also display that as the icon for Safari’s Favorites view, the iOS and Chrome web app, or Windows tiles. While I think this should really be present by default, here’s how you can have that for your micro.blog hosted site.
Step 1: Uploading the file
Go to your micro.blog Dashboard → Uploads
Upload your profile picture or logo, preferably in the .png format, with a resolution of at least 200 x 200
Click on the image to open it and copy its link
Step 2: Setting the icon
Click on Design → Edit Custom Themes → New Theme. Name it whatever you want. (Skip this step if you already use a custom theme)
In your custom theme, click the file called layouts/partials/head.html to edit it
Paste the following HTML code in there:
<link rel="shortcut icon" href="https://yoursite.com/youricon.png" type="image/x-icon" /> <link rel="apple-touch-icon" href="https://yoursite.com/youricon.png"/> <meta name="msapplication-TileColor" content="#dddddd" /> <meta name="theme-color" content="#dddddd" />
Replace all occurrences of
https://yoursite.com/youricon.pngwith the link you copied in Step 1
Save your changes by clicking Update Template
Finally, go back to Design and select the custom theme you edited as your site’s theme
Your site’s logo should now show within 24 hours at relevant places like so.