{"id":9890,"date":"2015-05-28T11:00:04","date_gmt":"2015-05-28T16:00:04","guid":{"rendered":"https:\/\/getflywheel.com\/?p=9890"},"modified":"2023-04-14T17:07:41","modified_gmt":"2023-04-14T22:07:41","slug":"create-wordpress-favicon","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/","title":{"rendered":"How to Create a WordPress Favicon"},"content":{"rendered":"\n

Look up, look way up! See that miniaturized logo up there on your web browser tab? That\u2019s called a favicon. There are other ways that they show up, but this is probably the most common way to see them. If you want to add one to your site, you can create a WordPress favicon in 4 easy steps.<\/p>\n\n\n\n

Choosing the Ideal Image Size and Shape to Work With<\/h3>\n\n\n\n

The image that you\u2019ll be working with will ideally be square. This prevents distortion when the image file type gets changed over to the file type required to make a favicon. Many of the online tools for converting images to favicon files won\u2019t work unless your photo is square.<\/p>\n\n\n\n

Step 1: Get Your .ico File<\/h3>\n\n\n\n

There are plenty of sites online where you can upload your photo file and have it converted into the .ico file type. As always, some are better than others and some are way more fun than others. The two best I\u2019ve found were Favic-o-matic<\/a> and Real Favicon Generator<\/a>.<\/p>\n\n\n\n

Favic-o-matic<\/a> has a really awesome looking user interface. Incredibly simple, you just click the upload image button and presto, it outputs the two most common favicon sizes, gives you code to grab and pop into your header files, and gives you a zip file with the images in it (more later on where to put those). You also have the choice on this site to have it create files for \u201cEvery damn size, sir!\u201d<\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

Real Favicon Generator<\/a> is my winner though. It places functionality first by giving you code to insert into your header files and also gives you a zip file. But what\u2019s cool is that it generates icon files for all different screen types that your website will be displayed on. In addition to desktop computers icon files, it gives you files for Apple touch devices in 9 sizes, Android devices, and Windows 8 devices. This was the default; I didn\u2019t have to choose it as an option. They really went all out to make sure your favicon looks good on everything.<\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

No matter which you choose, you\u2019ll need to have a square photo to work with. Upload your photo, have a look at the preview (if the site you chose offers one), and make sure you\u2019re satisfied. Go ahead and download the file, and remember where you save it!.<\/p>\n\n\n\n

Step 2: Upload to Your Base Directory<\/h3>\n\n\n\n

After you\u2019ve downloaded and extracted your favicon.ico files from the generator site you\u2019ve chosen, you\u2019ll need to upload it to the base public directory of the site you\u2019d like them to appear on. <\/span><\/p>\n\n\n\n

On WP Engine, you\u2019ll be able to do this by logging into SFTP, selecting the site you’d like, and moving all favicon.ico files right into the base directory. Once they’re in place, you’re done!<\/span><\/p>\n\n\n\n

Step 3: Format Your Headers<\/h3>\n\n\n\n

You\u2019ll need to add some html code to your headers.  For some themes, you\u2019ll want to go into the general settings and look for a section that says \u201cAdditional Headers.\u201d If you have that then you\u2019re off to the races, because all you need to do is copy the code generated from the site into this area and it\u2019s all taken care of.<\/p>\n\n\n\n

\"favicon3\"<\/figure>\n\n\n\n

If your theme doesn\u2019t have an \u201cadditional headers\u201d section, you\u2019ll want to download a plugin called \u201cInsert Headers and Footers.<\/a>\u201d   Once installed and activated, you can find it under settings in your WordPress dashboard. When you open it, you\u2019ll see a box for \u201cscripts in header;\u201d this is where you\u2019ll paste your code that was generated from the favicon generator site you chose.  Remember to save your changes!<\/p>\n\n\n\n

Step 4: Go Forth and Test!<\/h3>\n\n\n\n

Instead of a blank page looking icon in your web browser tab, you should now see the favicon you just created. Hop onto your Apple or Android devices and have a look.<\/p>\n\n\n\n

If it hasn\u2019t appeared or something other than the picture files you uploaded appears, it means that the html in your headers hasn\u2019t registered properly. You\u2019ll want to go check that all of the code made it into the headers box. If you use a cacheing plugin, clear your cache, wait a few minutes, and test again.<\/p>\n\n\n\n

Let us know how it turned out in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"

Look up, look way up! See that miniaturized logo up there on your web browser tab? That\u2019s called a favicon. There are other ways that they show up, but this is probably the most common way to see them. If you want to add one to your site, you can create a WordPress favicon in…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","resource-topic":[904,901],"resource-role":[903],"resource-type":[916],"class_list":["post-9890","resource","type-resource","status-publish","hentry"],"yoast_head":"\nHow to Create a WordPress Favicon<\/title>\n<meta name=\"description\" content=\"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a WordPress Favicon\" \/>\n<meta property=\"og:description\" content=\"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T22:07:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/05\/favicon11.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/\",\"name\":\"How to Create a WordPress Favicon\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-05-28T16:00:04+00:00\",\"dateModified\":\"2023-04-14T22:07:41+00:00\",\"description\":\"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a WordPress Favicon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a WordPress Favicon","description":"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create a WordPress Favicon","og_description":"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-14T22:07:41+00:00","og_image":[{"url":"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/05\/favicon11.jpg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/","name":"How to Create a WordPress Favicon","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-05-28T16:00:04+00:00","dateModified":"2023-04-14T22:07:41+00:00","description":"A favicon is a great way to establish brand recognition. Here's how to make one for your WordPress site.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-wordpress-favicon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create a WordPress Favicon"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/themes\/wpengine-breakthrough\/images\/fallback\/default-grid-resource.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Marketer","topic":"<strong>Topics:<\/strong> Marketing, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/9890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=9890"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=9890"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=9890"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=9890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}