Tag Archives: Bookmark Icon

New Favicon (aka bookmark icon)

Alex's Antidote - favicon.png
Alex's Antidote - favicon.png

OK so today I was showing off my new mobile theme on my iPhone while at work. My buddy Bran was checking out the icon I made (with a little help from GIMP and the logo Bran had made for my website — thanks again man) and he made a great suggestion… why not use use the icon for my favicon on my main website?

So I did…

If you have a website, want a custom favicon, but don’t know how to go about it, then you’re in luck because it’s really quite easy.

Step 1: Make an icon

It should be 32 x 32 (pixels) and 32 bit color.

You can use GIMP (or some other program) to make the icon, save it as a PNG.

You can name it whatever you want, but I recommend going with something simple and clear like: favicon.png

Step 2: Upload the icon/image to your website

via FTP or SSH. Be sure to put it in a place that’s easy to remember… like the root of your web directory…

Step 3: Edit your template’s header

Between the <head> and </head> tags and paste the following code:

<link rel="icon" type="image/png" href="/wordpress/favicon.png" />

Save (and upload if you cannot dynamically modify your template).

Alex’s Antidote now iPhone Friendly

Alex's Antidote iPhone icon
Alex's Antidote iPhone icon

That’s right folks, my website is now iPhone friendly. (Note: from what I understand it should also work in certain other fancy phones too)

Here’s how it goes:

Step 1 – Open Safari -> Navigate to: alexsantidote.com

find Alex's Antidote in iPhone's Safari Browser
find Alex's Antidote in iPhone's Safari Browser

Step 2 – Check out my fancy mobile theme

New Mobile Theme
New Mobile Theme
Page Menu
Page Menu

Step 3 – Bookmark for future reference

Bookmark Options
Bookmark Options

If you’re really awesome you’ll bookmark it to your Home Screen 😉

Bookmark to iPhone's Home Screen
Bookmark to iPhone's Home Screen

And you’ll see a nice shiny icon that will take you straight to this website when you touch it!

Shiny Bookmark Icon!
Shiny Bookmark Icon!

How’d I do it?

  • Install the WordPress plugin called: WPtouch Mobile Plugin + Theme for WordPress
  • Make a custom icon in GIMP (sudo apt-get install gimp)
    • The icon should be saved in .png format.
    • You will need 2 different sizes: 57 x 57 and 32 x 32
      • Name the 32 x 32 icon something that reflects the name of your blog (I used: Alex`s Antidote)
      • Name the 57 x 57 icon “apple-touch-icon.png” without the quotes.
  • In WordPress Settings you will find a menu called: WPtouch, upload the 32 x 32 icon there (look around, you’ll figure it out), then make necessary adjustments below (lots of settings to play with).
    • Be sure to save!
  • FTP/SSH into your root (and/or wordpress) directory for your blog and copy over the 57 x 57 icon you named “apple-touch-icon.png”
  • Done!

Let me know what you think in the comments (if you have time).