Skip to content

Instantly share code, notes, and snippets.

@morgyface
Last active May 14, 2020 11:48
Show Gist options
  • Select an option

  • Save morgyface/5d9c7bc6910a0f83aee8d7f99e4d3c98 to your computer and use it in GitHub Desktop.

Select an option

Save morgyface/5d9c7bc6910a0f83aee8d7f99e4d3c98 to your computer and use it in GitHub Desktop.
WordPress | Generate a universal favicon list
<link rel="shortcut icon" href="<?php bloginfo( 'template_directory' ); ?>/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="152x152" href="<?php bloginfo( 'template_directory' ); ?>/favicon/favicon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo( 'template_directory' ); ?>/favicon/favicon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="<?php bloginfo( 'template_directory' ); ?>/favicon/favicon-167.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="<?php bloginfo( 'template_directory' ); ?>/favicon/favicon-144.png">
@morgyface
Copy link
Author

morgyface commented Aug 25, 2016

Favicon

This little gist provides an exhaustive list of favicon icons which should cover pretty much every device/browser.

The sizes required (all square):
16, 32, 48, 152, 167, 180

The first file, the traditional favicon.ico, is actually made up of three files, 16×16, 32×32 and 48×48. You can compile the file online using icoconvert.com or similar.

Store the files in a directory called "favicon" within the theme directory.

@morgyface
Copy link
Author

This stuff is now available as a clever function here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment