« How to create a favicon for your website

02.23.2009

This tutorial assumes you have Photoshop. If you can figure it out using a free program like Gimp, kudos.

  • Open a new document: RGB, 72 ppi, transparent background, 100 x 100 (the dimensions can actually be whatever you want, assuming the file size isn’t HUGE, but they need to be the same)
  • Design your icon: this is usually your logo. Some pointers:
    • Using a dark gray circle behind your logo can help with that “web 2.0″ feel. Granted, I just went with my simple flame icon but it’s something to consider. Make a circle that has a beveled down layer style with the light source coming from 90° and about 20°-25° altitude makes for a good looking indention. Here are my settings:

These are the settings I used for the gray circle.

  • Place your logo on top of this circle layer
    • Placing a similar bevel style on your logo can be beneficial as well, only this time, make the bevel direction “Up” instead of “Down”
    • You may want to consider just using gray colors if your logo is simple. A good logo should work in black and white, grayscale and full color, being just as recognizable in each form.
  • Before you export it, be sure to update your foreground color to the color you want to use in your matte settings.
    • The Matte setting affects the edges of a transparent GIF. If Matte is set to None, the edges of the graphic will appear jagged when the GIF is placed on a Web page. If Matte is set to a color that matches a Web page background, the edges of the graphic will appear smooth against that background.
    • I used a Firefox plug-in called ColorZilla to determine the background color of Firefox’s tabs. I do realize that this doesn’t look completely proper in IE because of it’s lousy blue tabs, but it does look fine in Safari.
      • The color is #9E9E9E. Set this as your foreground color.
  • Make sure any layers underneath your logo and gray circle are transparent and then go to File > Save for Web and Devices… or press shift + option + command + s
    • Select GIF, along with “Foreground” from the dropdown menu for the “Matte” selection. The following options as well, saving it to somewhere you’ll remember (your Desktop!):

    My GIF export settings.

  • Head on over to ConvertIcon in your favorite browser and upload your newly created GIF. In the last dialogue box, deselect “Original Size (100 x 100)” and select “16 x 16″ - then click export and save it to your desktop as a .ico file.
  • Upload this file to the root directory (public_html) of your website and viola!

Comments or questions? Post away!

« Sync both Outlook Calendar & Gmail Calendar to iPhone via Google Sync

02.22.2009

This workaround will get your personal Google calendar and your work Outlook calendar syncing to your iPhone via Google Sync without sharing your personal calendar with your work Outlook Calendar.

Note: You can only run one Exchange ActiveSync account on your iPhone - that’s why this workaround is necessary. Also, this sync does NOT support email sync.

The Setup

  1. Back up your iPhone. We don’t want to take any chances.
  2. Create a new Google Calendar account - I chose to use my work email address which is setup with Outlook. This doesn’t create a gmail address, merely a calendar. Also, this isn’t going to replace your personal
  3. Download Google Calendar Sync on your work computer or a computer where Outlook can access it’s associated calendars. Set it up to sync your Outlook account with your new Google Calendar
  4. Go to your newly created Google Calendar and go to Settings > Calendars > Shared Settings. Share the calendar with your personal Google Calendar account and give it FULL access privileges.
  5. Login to your personal Google Calendar account and in settings, rename the shared calendar to “Work” or whatever you like.

NOTE: Upload any Contacts and Calendars from your phone to your computer before proceeding. The iPhone will delete Contacts and Calendars during setup.
Learn how to upload your Contacts with iTunes: PC Users - Mac Users.

The Execution

NOTE: for the full Google instructions, click here. I am just pasting in for simplicity’s sake.

Open the Settings application on your device’s home screen.
2. Open Mail, Contacts, Calendars.
3. Tap Add Account….
4. Select Microsoft Exchange.

Enter Account Info

5. In the Email field, enter the name of the account (anything you’d like).
6. Leave the Domain field blank.
7. Enter your full Google Account email address as the Username.
8. Enter your Google Account password as the Password.
9. Tap Next at the top of your screen.
10. A new Server field will appear. Enter m.google.com.
11. Press Next at the top of your screen again.

12. Select the Google services you want to sync. Currently only Contacts and Calendar are supported.
Make sure that you have uploaded your data before proceeding. Press Sync.

I didn’t select Contacts, only Calendar. I didn’t have my Google Contacts setup properly and didn’t care to have a bunch of extraneous email addresses synced to my phone.

After you’ve made it through all the steps, visit m.google.com/sync on your iPhone and activate the sync service. Now you’re set! Your personal calendar is not shared to Outlook but any changes you make on the work Calendar (either via your iPhone or via Google Calendars), it will sync to Outlook.

Comments or questions? Please let me know below!

« MAMP can be tricky.

So, I made my first attempt at Wordpress. Me likey. I setup MAMP on my MacBook but had a few problems. It turns out that there are some serious problems with using root to login to your mySQL db’s. I don’t know much about it but I learned a lot today.

Basically, here was my problem:

I installed MAMP and it worked correctly the first time but I needed to install Wordpress. So, I found a nice little tutorial over at Tech-Recipes which served as basic guidelines through the ordeal. Earlier, I setup a mySQL database on my free hosting account at 000webhost (thanks @joelnewcomer) and locally tried creating the database and user privileges with the info I was provided there. But, somewhere along the way I made an error (I think it was in the ‘host’ field when setting up my local db).

At first I got a ‘could not connect to host’ error, and later ended up making progress to a ‘404 error’ and then eventually a ‘database connection error.’ I’m not quite sure what fixed the problem but maybe this will help someone out there in interwebworld:

  • I had to make sure that Apache and MySQL weren’t running so I went to System Prefs > Sharing, turned off Web Sharing and restarted my computer. Yes, there are terminal scripts but I wanted to make sure.
  • Also, I reinstalled MAMP by deleting the folder withing Applications, rerunning the MAMP .dmg and copying it over to the Applications folder again.
  • Then, I placed the Wordpress package files within Applications/MAMP/htdocs/ folder.
  • I ran MAMP, clicked Preferences, changed some settings, pressed OK, then clicked Preferences and changed them back. I kept the ports on the default MAMP port settings (you can set this by clicking the ‘Reset MAMP Ports’ button under Preferences > Ports tab).
  • Here’s the kicker: when I clicked the “Open Start Page” button, I always got an error, even when it was fixed. So, I went to http://localhost:8888 and got the ‘Wordpress config file missing’ page. At this point, I still needed to setup my database. To get to the phpmyadmin page within MAMP, you have to go to http://localhost:8888/MAMP/ (and click on phpmyadmin) not the link that MAMP creates, which is http://localhost:8888/Applications/MAMP/. This only works if you have /Applications/MAMP/htdocs/ as you Document root and your Start Page URL in MAMP preferences. This was a very frustrating glitch but I finally figured it out.
  • Once I created the database, the only problem I had was using the correct host name. When in phpmyadmin, create your database and then click the localhost link at the top of the screen so that you see the whole system setup, not just one database’s specs. Then click Privileges and create a new user. This is where you setup your 3 major fields: username, password and host. For host I just put “localhost,” not “localhost:8889″ or “localhost:8888,” which some troubleshooting tutorials may give.
  • Then go back to http://localhost:8888 and follow the WP config file setup. I just put ‘localhost’ as the host when doing this.

Now, you should be set! If you have other problems, feel free to post your questions in the comments.