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.
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.
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.
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 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