This is my iPhone home screen. Yes, my icons are bottom-aligned. No, this isn't a native feature of iOS. For quite some time, I had been relying on a website called iEmpty to generate empty home screen icons.

[Using iEmpty,] you can add blank icons on your iOS home screen, and set your application icons where you want on the iPhone screen, hacking the limitation set by Apple on icons positions on the iOS devices screens.

iEmpty achieves this by using iOS's ability to save websites to your home screen with custom icons. iEmpty dynamically generates web pages with Apple icons that match your wallpaper, making them appear invisible.

There were a couple downsides to using this service. First, I was reliant on a 3rd-party website that didn't fully trust. Second, they hosted images ephemerally, so if I were to tap on one of the empty icons, it would open the iEmpty website and update the icon with iEmpty's logo. I'd have to go through the whole process of creating the icon again to replace the broken one.

To fix this, I decided it was time to host these icons myself. My website is currently built with Next.js, so I was very quickly able to throw together a dynamic route that generates pages for each icon I needed. I called that route [dim].js, and here is the entirety of the code:

import NextHead from "next/head";
import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  const { dim } = router.query
  return <>
    <NextHead>
      {/* Populates the icon name with empty text. */}
      <title> ‍ </title>
      {/* Sets the icon specified in the URL as the Apple home screen icon. */}
      <link rel="apple-touch-icon" sizes="57x57" href={`/assets/icon/${dim}.png`}></link>
    </NextHead>
  </>
}
              

For my purposes here, I did use the assets generated by iEmpty. Down the road, it would be nice to create a Figma or Sketch file that automatically handles all the correct cropping, etc.

Once this was done, I opened each icon page and saved them to my home screen.

That's it! Same result, except I'm no longer using iEmpty beyond creating the initial assets. 🎉

Published almost 4 years ago