How to Create a URL Logo

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Favicons replace the globe icon in the address bar.
Image Credit: r0mu/iStock/Getty Images

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.

Advertisement

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.

Advertisement

Video of the Day

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.

Advertisement

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.

Advertisement

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.

Advertisement

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.

Advertisement

For PNG files:

For ICO files:

Unless you're using a CMS-controlled site or include a file based section, 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.

Video of the Day

Advertisement

Advertisement

references & resources