Time and again, Micro.blog proves that it’s as flexible as it is easy to use. 
Micro.blog takes the profile picture that you upload and distributes it in several places, making it your site’s icon and favicon. There are a few instances where, as of now, it doesn’t create certain site icons. For example, I have my Micro.blog hosted blog bookmarked in my favorites folder in Safari. Micro.blog doesn’t provide Safari my profile image to use as an icon on that favorite.

No problem! With just a few minutes of work, and I was able to create the files, upload them, and load them into my custom theme template. This work-around doesn’t require much effort, especially if you only change your profile picture once or twice a year. Here’s how I did it.

1) You need to generate PNG versions of your photo in various sizes. I used Pixelmator, but you could conceivably use any simple photo editor. You’ll need versions of your photo in the following sizes:

• 16 x 16
• 32 x 32
• 64 x 64
• 152 x 152
• 167 x 167
• 180 x 180

2) With those files saved on your computer, upload them to Micro.blog by going to your Account > Posts > Uploads. (You could really host them anywhere, so if you want to warehouse them on another server, that’s just fine.

3) Now we need to tell Micro.blog, and more specifically your theme, how to tell the various browsers and devices that you have just the right image for them! Go to Account > Design > Themes. Open the layouts/partials/head.html template.

4) Paste the following link references into that document. (I put them right under the <link rel="shortcut icon"> entry in order to keep things simple.

<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/size-profile.png"/>

<link rel="apple-touch-icon" sizes="167x167" href="https://example.com/size-profile.png"/>

<link rel="apple-touch-icon" sizes="152x152" href="https://example.com/size-profile.png"/>

<link rel="icon" type="image/png" href="https://example.com/size-profile.png" sizes="64x64"/>

<link rel="icon" type="image/png" href="https://example.com/size-profile.png" sizes="32x32"/>

<link rel="icon" type="image/png" href="https://example.com/size-profile.png" sizes="16x16"/>

5) Grab the links to each of the six size versions of your uploaded files, and drop them into the right https://example.com/size-profile.png link.

That’s it! Micro.blog will refresh and you’ll have your profile picture in all of the places browsers and devices display favicons/icons on your site.