Favicon and iPhone Dock Icon

Website Favicon and iPhone Dock Icon

When completely branding a website with flashy graphics, don’t overlook the favicon and iPhone dock icons.

Favicons are super quick and easy to generate online using the favicon.ico generator. FTP into your website and save the created file on your web server.

Here’s my favicon:

You can also display a custom iPhone icon that displays if your website is saved as a bookmark to the dock (home screen). Create a 57px by 57px image and save it in the root of your web directory as “apple-touch-icon.png”. Mobile Safari looks for that file and if it exists, will use it by default. I prefer to be more explicit and define it with a LINK element along with the favicon.

Here’s how mine looks on my iPhone dock. Not bad.

Now for the code. Add these two LINK elements to the head of your document:
<link rel="shortcut icon" href="relative/path/to/favicon.ico" /> <link rel="apple-touch-icon" href="relative/path/to/apple-touch-icon.png" />

This is a really simple way to add some nice detail to your branding efforts.

May 2, 2009 | Filed Under Dev, atomSix, web sites | Leave a Comment

Prevent Image Hotlinking

Append “No Hotlinking” Code to the.htaccess File

Protect your bandwidth whenever possible. By adding a few lines of code to your root level .htaccess file you can prevent external websites from directly loading your images, audio, and video files.

Add the following code to your .htaccess file:

RewriteEngine on RewriteCond %{HTTP_REFERER} ^$ RewriteCond %{HTTP_REFERER} ^http://www.?your-domain.com/.$ [NC] RewriteRule \.gif|jpe?g|png|mov|avi|wmv|mpe?g$ - [F]

[AaronHalford.com]