Логотип сайта установим для быстрого узнавания бренда

Логотип сайта установим, потому что это не простая картинка, а его визитная карточка.  Впервые об этом писала 5.03 2013 года. В то время установила логотип  с помощью плагина All in one Favicon. Плагин стоял у меня на этом сайте до 1.10.2014, но потом  его деактивировала. Вместо него установила скрипт. Теперь оставляю в статье первую часть о плагине, но еще добавляю текст о том, как установить логотип сайта с помощью скрипта.логотип сайта

Логотип сайта — сделаем сами

Логотип создадим после того как мы создали новый сайт на Word Press. Известно, что логотип – это опознавательный знак фирмы, бренда, организации, а так же сайта. На блоге moylubimiblog.ru  установила простой логотип, он разместился в браузере перед названием сайта, на главной странице. Индивидуальный логотип сайта можно нарисовать самостоятельно, используя возможности сайта: https://www.favicon.cc/

Выбираем цвета и, прикасаясь карандашом, заполняем этими цветами квадраты. Нужно занять рисунком все поле, тогда получиться логотип нужного размера: 16 х 16px. Вначале я сделала логотип для своего первого сайта, о даче.  Блог у меня был живописный,  потому цвета к нему выбирала яркие. Потом  первый сайт удалила и завела новый, в той же теме.

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

логотип сайта предварительный просмотр

После того как мы изобразили рисунок, спускаемся чуть ниже к окну с названием «предварительный просмотр».  Мы увидим, как отобразится маленький рисунок фавикона в натуральную величину. Если нас рисунок устроит, можем скачать его из этого окна к себе на компьютер. Скачиваю и перемещаю картинку в папку «Мои рисунки». В ней  у меня еще много вложенных папок с картинками на все случаи жизни. На сайте фавикон генератор наши вопросы закончены. Второй способ об установке фавикона с плагином.

Логотип сайта — скачать плагин All in one Favicon

Он есть в Word Press org, закачивается и активируется традиционно. Фавикон появляется в параметрах админ панели, настроек дополнительных не требуется.

В новом окне предлагается загрузка картинки в 3 вариантах форматов, загружаю в формате ico. Сохраняем и получаем свой логотип сайта, остается проверить, как он установился, проверяю  и вижу, что в браузере он появился перед именем сайта.

 Логотип сайта — с помощью скрипта

Плагины утяжеляют сайты и снижают скорость их загрузки, известны и последствия этой медлительности. Поэтому, по возможности, плагины заменяю скриптами. Фавикон относится к таким плагинам, которые можно заменить.

Сами по себе логотипы моих сайтов мне нравятся, но одна из картинок у меня потерялась, при замене операционной системы. Эту картинку восстановила программой Fast capture. Вначале сделала скриншот, а затем в редакторе отредактировала точный размер 16 х 16 px. Нужно чтобы  эти картинки были в расширении icons.

Поступаю совсем просто: под названием картинки расширение img заменяю на ico. Получаю предупреждение, что смена расширения, может сделать файл недоступным, но продолжаю. Если не получиться, сделаю новый скриншот,  но пока оба фавикона остаются на месте, в папке.

Вначале деактивирую плагин фавикона, но никуда его не удаляю. Загружаю файл ico на сайт в файловом менеджере хостинга. Путь к фавикону: папка publikum html – перейти к нужному сайту. В самом низу страницы находится большая кнопка для загрузки файлов. Открывается новое окно, где нужно выбрать файл:

выберем файл

Откроется окно с рисунками на нашем компьютере, здесь  выберу файл фавикона из папки и закачаю его на хостинг. Раньше переходила на сайт, в админпанель, но уже год Word Press  блокирует такие действия. Однако то же самое делаю на хостинге. Выбираю  файловый менеджер, переход к нужному сайту. Папку themes, затем wp-content, header.php — заголовок. Вставляю перед закрывающим тегом </head>, следующий скрипт:

Эту строку  полностью копируем, перенесем в блокнот notepad ++,  заменим полный адрес сайта на свой. Обновим файл, и посмотрим, что получилось, выйдя из админпанели, на сайт. У меня загрузка закончилась установкой фавикона. Теперь  плагин All in one Favicon можно удалить, у меня он послужил больше года. Спасибо ему! Со временем скрипт куда-то тоже потерялся, но картинка фавикона на обеих сайтах сохраняется до настоящего времени, даже при перемене шаблонов.

Корректирую рисунок фавикона

PS: В комментарии мне написали, что не видно фавикона, тогда по своей же указанной ссылке вновь перешла на сайт генератор фавикона. Сделала новый фавикон ярче, скачала его, в расширении ico и заменила на хостинге.

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

Рекомендация Яндекса об увеличении размера фавикона

Яндекс вебмастер сделал мне такую рекомендацию, увеличить фавикон до размера 120 на 120 пикселей. Вначале увеличила в программе Paint прежний фавикон, потому что привыкла по нему узнавать мой сайт. Сделала этот рисунок в расширении jpg, закачала опять на хостинг. В Яндексе написано, что фавикон появится через 3-10 дней. Время прошло, но фавикона все нет. Тогда установила еще скрипт в заголовке сайта. Но это тоже оказалось бесполезным.

Тогда скачивала разные плагины для фавиконов. Но понравился мне плагин «Genie WP Favicon». После скачивания и активации найдем его в меню админпанеле, разделе «внешний вид». Кликнув эту опцию окажемся во вкладке плагина.

вкладка для настройки фавиконаВ эту вкладку нужно загрузить наш фавикон, но только в форматах: ico, png или gif. Опять в программе Paint  сохраняю свой фавикон уже в размере 120 на 120 пикселей. Но теперь в формате png. Загружаю его во вкладку плагина и сохраняю. В результате фавикон моментально появился перед названием сайта, а так же перед всеми его статьями.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Что будем искать? Например,Человек

Мы в социальных сетях