How to Create a URL Logo

By Dan Stone

A favicon is a creative, practical way to add subtle visual flair to your website's presence. Favicons are small images that Web browsers use on page tabs and the address bars. They display a logo or image associated with the website that acts as a visual brand identifier next to the title or URL. Favicons are particularly useful site identifiers in tabbed browsing because the available text space used for page titles decreases to next to nothing as the user opens more tabs.

Things You'll Need

  • Graphic design software

Step 1

Design the icon you want to use in a photo or graphics-editing program. You can take an existing logo or image associated with your site or brand and adjust it to adhere to favicon standards. Favicons always use square dimensions and have a maximum supported size of 256-by-256 pixels. Crop and size the image to fit in a 256-by-256-pixel square if you're going to use an icon packer to support multiple sizes. If you're just going to do one version, go with a 16-by-16-pixel size.

Step 2

Export the icon graphic as a PNG image file from the graphic-design program. PNG is the W3C standard image format for favicons. Some browsers may display JPG files as favicons, but the standard is not officially supported. Additionally, icon packer programs may not work with images in other formats. Favicons also support GIF and ICO files.

Step 3

Pack your exported PNG file into an ICO file with an ICO converter program. An icon converter program processes a PNG favicon, formats it for several different widely supported favicon sizes and embeds them into a single file. ICO files provide higher resolution favicons than 16-by-16 pixels for devices that support them.

Step 4

Log in to your website hosting service and upload the PNG or ICO file to your website's media server. Copy the uploaded file's URL; you're going to need it to attach the favicon to the site.

Step 5

Open your site editing program and add the following code, modified with the favicon file's URL as indicated, to the

section of your website.For PNG files:For ICO files:Unless you're using a CMS-controlled site or include a file basedsection, you're going to have to add the code to each page you want to feature the icon. The favicon appears after you save and update the site pages.

Tips & Warnings

  • Photo-editing programs like Photoshop and Corel Draw work well for designing and formatting the icon. Alternatively, you can use free programs like Paint.net and Pixlr.
  • Some browsers automatically associate an image file located at the /favicon directory as a favicon; however, the W3C organization discourages this practice because it is not a universally supported standard and is contrary to Web architecture principles. Additionally, many Web-hosting services and CMS systems do not let the user place media content outside media file directories, making this practice impossible.