Favicon and iPhone Dock Icon

(2 votes, average: 5.00 out of 5)

Loading ...

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.

These icons link to social bookmarking sites where readers can share and discover new web pages.