Today’s Tell Me About It Tuesday is: Tech Tips!if you are new here each Tuesday is Tell Me About It Tuesday but it alternates Tech Tips & Product/Items I love
Today I want to tell you how to create a homepage icon for your blog in case anyone ever adds a direct link to your blog on their iPad/iPhone/iPod homescreen.
You know the icons. The rounded corner, shiny looking app icons. You can have one and have it automatically appear when someone clicks “Add to homescreen” from their web browsers on their i-whatever device.
Pretty neat huh?
It’s one more way to brand yourself.
and Branding. Is. EVERYTHING.
Definition of what we are creating: an Apple touch icon is basically a favicon for Apple mobile devices, and, if set, is displayed when a user saves a web page to their home screen.
First you should check and see what pops up when you add your blog to an i-device homescreen. To do that follow these steps:
- Open Safari on the device & navigate to your blog.
- Click this icon at the bottom of the screen (or top if it’s an iPad)
- A whole menu of options should come up. Click “Add to home screen”
- Next the ‘add to home screen’ screen comes up and you should be able to title it whatever you want. I recommend your site name to avoid confusion.
- Next you will see the icon pop up on your home screen when you click ‘add’ It will most likely just be a screen shot of your website. Which is not pretty in small icon format:
So let’s change that!
First you need an icon that is sized 129 pixels high by 129 pixels wide. Do not worry about making rounded corners or that shiny reflection thing. Apple does that automatically (or if you don’t want that I can show you how to code it so it shows up as a flat square).
Make sure you save your icon as a .png file.
Need help creating one? You have 2 options: Hire me to make one for $5 OR download the free photo editing software GIMP (which is by far the BEST free photo editing/graphics software–very similar to photoshop) and create one yourself!
Next you need to take your saved .png file and upload it either in your blog’s media section (wordpress users), through FTP if you know how is best but just the regular media section will work, or photobucket if you use blogger.
You will need to copy & paste the direct link to the image url so save it somewhere you can find it (just open a blank text document in Word or any text editor on your computer).
Navigate to your blog’s <head> section and add this code (changing the RED part to your images direct link url):
<LINK REL=”apple-touch-icon” HREF=”YOUR-IMAGE-LINK-HERE” />
OR if you want it to show up with rounded corners but NOT glossy use this code (you can only use one, not both):
<LINK REL=”apple-touch-icon-precomposed” HREF=”YOUR-IMAGE-LINK-HERE” />
Need help finding your <head> section?
If you use wordpress (self-hosted) and have the Headway theme:
- Go to your dashboard and click on “Headway”
- Then click on “Configuration” and then Scripts & Analytics.
- Your Head section is the first section in that tab. Add the code & click save.
If you use wordpress (self-hosted) and have the Genesis theme:
- Install the plugin called: Genesis Simple Hooks
- Navigate to Genesis–>Simple Hooks.
- The first one (called wp_head) is where you put your code. Then save.
If you use Blogger:
- Head into your dashboard and enter the ‘edit HTML’ portion of your site
- Use your ‘find’ option (PC users click control plus the F key at the same time, Mac users click command plus the F key at the same time) and type in <head>. This will bring you to the right section in the HTML.
- Place your code directly under <head> and save.
Want to see what all that hard work gets you?
On my sites my pretty button looks like this:
Tell me in the comments please:
Do you have one of these set up yet?
Did you even know it was possible?
Have a happy day,
If you like what you just read please Subscribe so you don’t miss a thing!