Kак правильно добавить favicon-иконку на свой сайт wordpress, чтобы она корректно отображалась

Здравствуйте, коллеги, сегодня я спешу пригласить вас на урок, потому что для вас я приготовила ценную информацию. Сама я научилась этому у профессионалов, а не собирала, как это делают многие, разношерстную информацию в сети.

favicon-saita

Поэтому, если вас интересует вопрос «как добавить favicon на свой сайт wordpress?» по всем правилам, присаживайтесь и повторяйте.

Все шаги я подробно прописала.

Фавиконка – это маленькая иконочка, которая отображается, в заголовке на вкладке браузера и в поисковой выдаче (с задержкой по времени!) рядом с названием вашей статьи. Если вдруг после добавления иконки на сайт она не отображается, не спешите расстраиваться, в этой статье я напишу о причинах.

Сервис нам в помощь

Нам понадобится помощь сервиса favicon-generator.org. Сейчас мы сделаем фавикон в режиме онлайн, но помните, что любая картинка, из которой вы хотите сделать favicon.ico должна быть квадратной. Она может быть и 375 на 375 пикселей, и 410 на 410, и любого другого размера, самое главное, что ширина должна быть равна длине.

Давайте перейдем в сервис и создадим фавиконку. Итак, как только вы перешли, нам необходимо сделать следующие настройки.

iconka
А именно, ставим точку напротив «Generate only 16×16 favicon.ico». После этого нажимаем «Обзор» и выбираем файл, который вы приготовили. Далее нажимаем на кнопку «Greate Favicon».

Наш фавикон сгенерирован. Давайте его скачаем, ссылка показана на скрине, а также скопируем код, который предоставил нам сервис.

generator-favicon

После этого идем в наш файловый менеджер, подключаемся к удаленному серверу и открываем папку с активной темой.

Закачаем туда favicon и откроем файл header.php для редактирования. Далее между тегами <head>……</head> вставляем сгенерированный код. Но это еще не всё. Для того, чтобы фавиконка корректно отображалась, нам надо вставить одну php-функцию в данный путь.

kod-favikona

Скопируйте эту функцию: <?php get_template_directory_uri(); ?> и, вернувшись в файл, header.php вставьте эту функцию. Обратите внимание, что ее необходимо вставить до кавычек и перед слеш: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>
<link rel=»icon» href=»<?php get_template_directory_uri(); ?>/favicon.ico» type=»image/x-icon»>

Не забываем сохранить файл.

А теперь любуемся полученным результатом, предварительно введя имя сайта в браузере. Наша картинка появилась рядом с адресом сайта.

v-adrese

Чтобы фавиконка отображалась в результате поиска должно пройти некоторое время. Придется подождать пока поисковые роботы проиндексируют ваш сайт.

Создаем фавиконку в Фотошопе

Если вы умеете рисовать или у вас есть знакомый художник, ваша фавиконка может быть настолько оригинальной и неповторимой насколько позволяет ваша фантазия.

На первом шаге создайте новый слой размером 16 пикселей в длину и ширину. Большое количество картинок в формате png можно найти в интернете, а лучше нарисовать свою — уникальную. Найденную картинку разместите поверх созданного слоя, а на нижний слой можно наложить текстуру, градиент или просто залить цветом так, чтобы он не выпадал из общей цветовой гаммы дизайна блога.
v-photoshope
Стоит ли вставить свою фотографию в качестве иконки?

Если на вашем блоге раскрыта личность автора (многие просто наполняют сайт статьями, не задумываясь, что посетителям хочется знать автора в лицо), если вы продвигаете блог как эксперт, то можно поставить и фотографию.

Вам хочется узнать мое мнение по этому вопросу? Я вам отвечу, что мне такая идея не по вкусу. Фавикон настолько мал, что ваше фото кажется просто уродливым. Опять же повторюсь, это мое мнение, а для кого-то такая фотография — незаменимый эффект бренда. Сохранить готовое изображение необходимо с расширением ico.

Какие еще существуют способы?

В интернете много информации и много ресурсов, которые вам предоставляют возможность сделать мини-картинку из изображения, но долго на этом вопросе застревать не стоит. Нарисовали картинку, добавили готовую в папку с темой, прописали путь и забыли. Нас ждет впереди еще столько работы! Вести блог – дело не шуточное!


Во время написания для вас этой статьи на мой почтовый ящик поступило письмо. Сейчас я его скопирую и покажу вам. А содержание такое: «На данный момент сколько вы зарабатывает имя свой сайт?)
и как я понял он у вас не один) Вот я хочу сайт но я не знаю какой создавать((с партнерскими программами уже ознакомился и думаю для начало создать игровой блог подскажите как это сделать что бы не прогореть)».

Если у вас возникли подобные вопросы, советую вам подписаться на обновление моего блога и впитывать всю информацию, которую я буду давать. Почему я с уверенностью говорю, что учиться лучше у меня?

Во-первых, у меня есть опыт, пусть даже не всегда хороший (плохой опыт дает больше знаний и помогает не повторять ошибки), во-вторых, всю информацию, которую я предоставляю для вас считаю лучшей, потому что учусь у тех, кто не первый год ведет блог, у тех кто действительно достиг высоких показателей как по посещаемости, так и по прибыли с блога.

Обратите внимание на мою статью по составлению семантического ядра, а лучше (если вы в самом начале своего пути) о выборе ниши. Пусть даже у вас блог об играх, вам никто не запрещает зарегистрироваться в СПА партнерках. У меня есть готовый перечень таких партнерских программ на этой странице.
Все самое важное по теме я вам дала, а теперь, по традиции, анекдот для настроения и оптимизма! Наталья Краснова.

Анекдот.
tarakanТы какую фавиконку для блога выбрал?
— Таракана!
— С ума сошел что-ли? Отпугивать же будет посетителей!
— Ты что, наоборот, привлекать! Они их так давно не видели!

Понравилась статья? Поделиться с друзьями:
Комментарии: 2
  1. Игорь Сварог

    Я все делаю все как написано в таких статьях, но фавикон почему-то у меня до сих пор не отображается (сайту 1,5 лет)

  2. Наталья Краснова (автор)

    Перешла на ваш блог и фавиконки не увидела. Странно… У меня сразу после установки появилась.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: