---
title: "Display Your Logo in Browser Tabs with Favicons"
date: 2014-06-18
author: "Courtney Robertson"
featured_image: "https://courtneyr.dev/wp-content/uploads/2014/06/create-a-favicon1-png.avif"
categories:
  - name: "WordPress"
    url: "/category/wptips.md"
tags:
  - name: "favicon"
    url: "/tag/favicon.md"
  - name: "How-to"
    url: "/tag/how-to.md"
  - name: "Plugin"
    url: "/tag/plugin.md"
  - name: "tutorial"
    url: "/tag/tutorial.md"
  - name: "wordpress"
    url: "/tag/wordpress.md"
---

# Display Your Logo in Browser Tabs with Favicons

When you launch your website, it’s really easy to miss a lot of little details, including a favicon. Does your website display your logo in browser tabs or shortcuts on mobile phones? Let’s get that fixed now.

## What is a Favicon?

![faviconexample](https://courtneyr.dev/wp-content/uploads/2014/06/faviconexample.png)When you are browsing websites, have you noticed a small logo appearing in the browser tab? This little image is known as a favicon, and is very helpful when the visitor has 20 different tabs open and needs to find which one is your site. The term *favicon* is short for *“favorites icon”.* Favicons started just for tabs on websites, but now also include:

- Shortcuts saved to iOS dashboards
- Windows 8 (phone and computer) tiles
- Android
- Retina display computers

With so many places now using a tiny image to set your website apart, it’s important that you make a favicon.

## How to Make a Favicon

You will need a square representation of your logo at least 270 pixels wide and tall saved as a .png or .gif file format.

### Manually Creating a Favicon

Follow [the steps from WordPress.org ](http://codex.wordpress.org/Creating_a_Favicon "Create a Favicon")to create a .ico file and upload it to your website. Some themes include a favicon location to upload as well and allow you to upload it to the theme settings.

### Using a Plugin to Configure Your Favicon

To create a favicon and configure your WordPress website to use it, I recommend the plugin [Favicon by RealFaviconGenerator](http://wordpress.org/plugins/favicon-by-realfavicongenerator/ "WordPress Favicon by RealFaviconGenerator"). This is the only plugin that I found that covers so many different favicon formats. Once installed, a Favicon menu option appears under Appearance. Upload your image, and generate.

![wordpress plugin favicon settings](https://courtneyr.dev/wp-content/uploads/2014/06/faviconsettings-600x376.png)You will be redirected to configure settings for your favicon on their website:

![realfavicongenerator](https://courtneyr.dev/wp-content/uploads/2014/06/realfavicongenerator-600x444.png)Configure the background colors that you would prefer for iOS and Windows tiles. I also select the high resolution favicon option not pictured to prepare for retina devices. Congrats! Your favicon is now created and implemented. Double-check how it will display on many devices and sizes at [Favicon Checker](http://realfavicongenerator.net/favicon_checker? "Favicon Checker"). P.S. – if you host with HostMonster or use a Genesis theme, please go fix this now. I’d rather see a blank icon placeholder than more websites with these favicons.

Also on:- [ website](http://www.scoop.it/t/simple-local-business/p/4023179244/2014/06/18/display-your-logo-in-browser-tabs-with-favicons)
- [ website](http://www.stumbleupon.com/content/1kYSUV/comments)