How to Create a Website Icon

Bookmark your site in style.

Website icons (primarily known as “favicons”) are a great way to show off your logo and give your website a little something to help it stand out. The favicon shows up in three places:

  1. In the browser’s tab, when the website is open (in most browsers, this appears to the left of the web site title).
  2. As the icon for a bookmark.
  3. If you have a good browser (a.k.a. “anything but Internet Explorer”), and that browser has a bookmarks bar, your favicon will be the icon for the bookmark here as well.

FavIcon Appearances

FavIcons are super easy to set up:

  1. Generate your favicon.
  2. Take your .ico file and place it within your website directory (anywhere is fine, but I personally like to use an “images” folder).
  3. Create a link to the favicon in the <head> tag of your page.
    • Keep in mind that the favicon only appears on pages with this link. So if you have a template or master page that every page on your site uses, place it here! Otherwise, you’ll need to place it on every page in your site.
    • You must specify the relation attribute of your link to be “Shortcut Icon”.

Head Tag


Your Thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s