How to add favicon in wordpress

New Page

How to aggregate a Favicon on WordPress blog

Ultima actualización en12 de mayo de 2022por Equipo Editorial | Disclosure of the reader Disclosure : Our content is respaldado por el lector. Esto means that if click in algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por que es important y cómo puede apoyarnos.

Shares 416 Share Tweet Share Facebook Messenger WhatsApp Email

Do you want to learn how to aggregate a favicon in WordPress?

Favicon or icon of the site is the smaller image that appears together with the title of this site web in the browser. Ayuda has known usuarios to identify his web site and the most frequent visitors to his site will create an instantaneous recognition for this diminished image.

Esto aumenta el reconocimiento de su marca y lo ayuda a generar confianza entre sus audiencias. In this article on the most common WordPress errors, no favicon is aggregated between the top 25.

In this article, the mostraremos how to aggregate a favicon on a WordPress blog.

¿Por qué debería aggregated a Favicon on your WordPress site?

As mencionamos anteriormente, establishes the identity of its website. Sin embargo, también will improve the usability of su sitio and the experience of the usuario. Esta imagen te ayudará a comprehend better:

Favorites and pestañas of the navegador Favorite icons in browser tabs

The mayoría of los usuarios suelen tener muchas pestañas abiertas en la ventana de su navegador. Esto occulta el título de su sitio web a medida que aumenta el número de pestañas. El favicon ayuda al usuario a identificar su site web y cambiar rápidamente a la pestaña que dessea.

Puede pedir a su usuarios que agreguen su sitio a su pantalla de inicio en dispositivos móviles. El ícono de su sitio o favicon también se usa cuando un usuario aggregate su sitio su pantalla de inicio en un dispositivo móvil.

Ícono del sitio que se muestra como el ícono de la application en la pantalla de inicio de un device móvil Site icon displayed as app icon on home screen of mobile device

Cómo created a favorite icon

Use your brand logo as your site icon or favicon. El tamaño recommended para la imagen del icono de su sitio es de al menos 512 pixels tanto de ancho como de alto. The image of the icon of the site should be a quadrado, can use a larger rectangular image and WordPress will allow it to collect the image in the aggregate.

Creating a Site Icon for WordPress Blog Using Adobe Photoshop Creating a Site Icon for Your WordPress Blog Using Adobe Photoshop

Recomendamos usar un programa de edición de imágenes como Adobe Photoshop o Gimp para crear un ícono de sitio de exactamente 512 × 512 píxeles. De esta manera puedes mantener proporciones exactas para tu imagen. Puede utilizar una imagen transparente o rellenar la imagen con un color de fondo de su elección. Esta imagen puede estar en formato png, jpeg o gif.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding Your Site Icon or Favicon in WordPress

Since WordPress 4.3, you can add a favicon or site icon from WordPress admin area. Simply go to Appearance » Customize and click on the ‘Site Identity’ tab.

Site identity and personalization Site Identity in Customizer

The site identity section in the WordPress theme customizer allows you to change the site title, description, and control whether or not you want to display them in the header.

It also allows you to upload your site icon. Simply click on the select file button and then upload the image you want to use as site icon.

Aggregate site icon and favicon on WordPress Adding Site Icon and Favicon in WordPress

If the image you are uploading exceeds recommended size, then WordPress will allow you to crop it. If it matches the recommended size exactly, then you can just save your changes.

That’s all you can now preview your site and see your favicon in action. You can also visit your site on a mobile device and then from the browser menu select “Add to homescreen’. You will notice that your site icon will appear on the homescreen.

Pro Tip: if you’re trying to customize the SEO title that shows up next to the favicon, then you will need the free All in One SEO plugin. For more details, see our guide on how to install and set up AIOSEO.

Adding Favicon to Older WordPress (4.2 or below)

If you’re using an older version of WordPress or want to learn how to upload your favicon manually, then this step is for you.

First, you need add the favicon file to your website’s root directory using FTP or your WordPress hosting file manager.

After that you can simply paste this code into your theme’s header.php file.

1

2

< link rel = “icon” href = “https://www.wpbeginner.com/favicon.png” type = “image/x-icon” />

< link rel = “shortcut icon” href = “https://www.wpbeginner.com/favicon.png” type = “image/x-icon” />

Make sure to replace wpbeginner.com with your site’s URL, and you are good to go.

If your theme does not have a header.php file, or you cannot find it, then don’t worry, we have a plugin for you. Simply install and activate the free Insert Headers and Footers plugin.

After activating the plugin go to Settings » Insert Headers and Footers and paste the code provided above in the header section to save your settings.

If you don’t want to deal with FTP at all, then you can also use the plugin called All in One Favicon.

We hope this article helped you add a favicon to your WordPress site. You can also check out our ultimate WordPress SEO guide to boosting your rankings or check out our expert pick of must-have WordPress plugins to grow your website.

If you liked this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Shares 416 Share Tweet Share Facebook Messenger WhatsApp Email

WordPress for Beginners:

How to Change Your Favicon in WordPress: A Step-by-Step Guide

September 12, 2019 | 18 comments | Tags Branding, WordPress

Branding_Cart_Shop_FI

yoast_seo Get Yoast SEO Premium

Be the first to benefit from new features and tools , before everyone else. Get 24/7 support and improve your website’s visibility.

 $99 USD  / year (excl. VAT)

Get Yoast SEO Premium »

Read real user reviews

g2_logo_white_rgb star-rating-star star-rating-star star-rating-star star-rating-star half stars4.6 / 5

Have you seen this icon in the search results in front of your site URL? It has been visible for some time now in Google’s mobile results. And, as we speak, it’s rolling out for desktop search results as well. So no excuses, your site needs a good favicon. Fortunately, setting a favicon in WordPress is very simple. Here, we will explain how to change the favicon of your WordPress site!

We’ve been writing about favicons for years. This article on favicons and branding will tell you what to think about in this regard. Read it and make sure your favicon is good and stands out.

favicon-mobile-search-results-600x315Yoast’s favicon shows up when you search for our brand on mobile. How to Change Your Favicon in WordPress

Now let’s give you a simple step-by-step guide on how to change your favicon in WordPress. The favicon is called a site icon in WordPress and can be added in the customize theme section.

  1. Log in to your WordPress website.

    When you’re logged in, you’ll be in your ‘Dashboard’:WordPress Dashboard

  2. Click on ‘Appearance’.

    On the left-hand side, you’ll see a menu. In that menu, click on ‘Appearance’.appearance-in-wordpress-3

  3. Click on ‘Customize’.

    The ‘Appearance’ settings will expand providing you with additional options. Click on ‘Customize’. customize-in-WordPress

  4. Click on ‘Site Identity’ and add your favicon under ‘Site Icon’.

    Here you can define your site name, tagline, logo, and icon. The image you set under “Site Icon” will be used as your site’s favicon: Site_Identity-e1569497183607-426x800

That was easy, wasn’t it? So, no more excuses, get to it. Change that favicon on your WordPress site!

Read more: Favicons and your online brand »

Joost de Valk

Joost de Valk is the founder of Yoast. After selling Yoast he’s stopped being active full time and now acts as an advisor to the company. He’s an internet entrepreneur, who, together with his wife Marieke, actively invests in and advises several startups. His main expertise is open source software development and digital marketing.

Avatar of Joost de Valk WordPress for beginners series

« Previous post WordPress plugin not working? Check these 5 things Next post » What is a slug and how to optimize it?

WordPress_FI-250x131 See more from the WordPress for beginners series »

Coming up next!

  • WordCamp Valencia 2022 Event

    WordCamp Valencia 2022

    October 21 – 22, 2022 We’re excited to share that team Yoast is sponsoring WordCamp Valencia 2022. Check out this page and learn more about this event. See where you can find us next »

  • Yoast SEO News Webinar – October 25, 2022 SEO webinar

    Yoast SEO news webinar – October 25, 2022

    25 octobre 2022 Notre responsable du référencement, Jono Alderson, vous tiendra au courant de tout ce qui se passe dans le monde du référencement et de WordPress. Tous les webinaires Yoast SEO »

Recevez des conseils SEO gratuits directement dans votre boîte de réception !

  • Get weekly tips on how to optimize your website’s SEO, usability and conversion
  • Get our free courses right away to learn how to improve your site’s ranking.

E-mail

Subscribe for Free SEO Tips » Privacy Policy

HTML bookmark icon

❮ Previous Next ❯

A favicon is a small image displayed next to the page title in the browser tab.

How to add a favicon in HTML

You can use any image you like as a favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image appears to the left of the page title in the browser tab, like this:

favicon example

To aggregate a favicon on your web site, save your favicon image on your web server or create a carpet on your directorio raíz llamada images and save your favicon image on this carpet. A common number for a favicon image is “favicon.ico”.

Next, add a <link>elemento su archivo “index.html”, after the <title>elemento, así:

Example

<!DOCTYPE html> <html> <head> <title>Title of my page </title> <link rel=”icon” type=”image/x-icon” href=”/images/favicon.ico”> < / head> <body> <h1>This is a heading </h1> <p>This is a paragraph. </p> </body> </html>

Ahora, keep the “index.html” archive and visualize a cargarlo in su navegador. La pestaña de su navegador ahora debería mostrar su imagen de favicon a la izquierda del título de la página.

ADVERTISING

ADVERTISING

Favicon archive format support

The following table contains the archive format support for a favicon image:

Navigator ICO PNG GIF JPEG SVG
Edge Yes Yes Yes Yes Yes
Chromium Yes Yes Yes Yes Yes
firefox Yes Yes Yes Yes Yes
Opera Yes Yes Yes Yes Yes
Safari Yes Yes Yes Yes Yes

Chapter summary

  • Use the HTML <link> element to insert a favicon

HTML wrap label

Label The description
<link> Defines the relationship between a document and an external resource

For a complete list of all available HTML tags, visit nuestra Referencia de etiquetas HTML.

❮ Próximo previous ❯


Video How to add favicon in wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…