Создаем фавикон онлайн

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

Создаем фавикон онлайн на сайт

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

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

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

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

Изображение фавикона бывает и большего размера, например, 24х24; 32х32 и больше, но в основном используется 16х16, формат изображения «ico», хотя применяются и другие форматы.

Для установки фавикона на сайт можно использовать несколько вариантов:

  • установка с админпанели Вашего сайта;
  • установка в корневую папку сайта с помощью кода;
  • установка на сайт с помощью плагина Favicons.

Установка фавикона на сайт с помощью плагина является достаточно простым, поэтому такой способ подходит для новичков, не надо иметь знаний, не надо готовить фавикон, достаточно выбрать его в библиотеке плагина. В уроках по созданию блогов именно этот вариант и показан.

Работа по установке плагина и создание фавикон онлайн занимает считанные минуты. Как установить фавикон на сайт с помощью плагина мы подробно рассмотрели в одной из моих статей «Установка фавикона на сайт«.

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

Год назад я сам устанавливал фавикон на свой сайт с помощью плагина, но по мере развития блога, нужно было снижать нагрузку, уменьшать время открытия блога. Кстати, если Вам надо измерить время открытия блога, можете посмотреть эти статьи «Тест скорости загрузки сайта«, и «Ускорение загрузки сайта«, там есть подробная инструкция.

Время открытия блога становилось все больше, поэтому пришлось лишние плагины убрать, включая и плагин Favicons. Кроме того, захотелось иметь своё индивидуальное изображение.

Итак, в данной статье мы рассмотрим два вопроса:

  • как просто создать уникальный фавикон онлайн для сайта, создаем фавикон онлайн;
  • как установить изготовленный фавикон на сайте без плагина с помощью кода?

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

В данной статье мы научимся создавать фавикон (Favicon) с помощью бесплатного онлайн генератора фавиконов для сайтов. Генераторов по созданию фавиконов в Интернете много. Могу порекомендовать зайти по адресу http://favicon.ru  и http://favicon-generator.org/, мне понравились оба сервиса, другие сервисы не пробовал.

Итак, заходим по второму адресу и попадаем на страницу сервиса (смотрите скрин 1).

Фавикон_1

Скрин 1

Если Вы хотите использовать готовое изображение, которое у Вас есть в папке компьютера, то делаете следующее. Нажимаете кнопку «Обзор», выбираете нужное изображение, фотографию и нажимаете кнопку «Создать Favicon» (на английском «Create Favicon»). В левом верхнем углу сгенерирован Ваш фавикон (смотрите скрин 2).

Фавикон_2

Скрин 2

Исходное изображение можно загружать в формате gif, jpeg, png – на выходе получите формат ico. Дело в том, что не все браузеры поддерживают форматы gif, jpeg, png, поэтому и делается универсальный формат ico для всех браузеров.

Теперь готовое изображение фавикона лучше сохранить в папку на компьютер. Для этого нажимаем правой кнопкой мыши на изображение полученного фавикона и выбираем функцию «Сохранить изображение как» и сохраняем его. Для удобства, полученный файл изображения, лучше переименовать, например, в favicon — так удобнее будет прописывать его в коде.

При желании, можем зайти в галерею и выбрать там готовый фавикон. Для изготовления уникального изображения заходим в раздел «Редактор» (Editor). В новом окне слева мы видим поле с квадратиками – здесь будем рисовать изображение (смотрите скрин 3),

Фавикон_3

Скрин 3

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

Ниже находятся инструменты – карандаш для рисования, пипетка, ластик и редактор, которые позволяют нарисовать фавикон.

После выбора цвета, выбираем режим рисования «Draw» и приступаем к закрашиванию полей. Хоть это и шаблон, работа все равно носит творческий характер. Советую рисунок в поле делать максимально большим, иначе при уменьшении детали рисунка будут мало заметны. Конечно, здесь надо поэкспериментировать, как с размерами, так и с цветом.

Не стоит обращать внимание на то, что получаются ступенчатые неровности – программа их устранит. После проверки, редактирования и исправления сохраняем полученное изображение, нажатием кнопки «Create Favicon» (Создать фавикон). В левом верхнем углу появился созданный нами фавикон (смотрите скрин 2), сохраняем его в папку на компьютер. Как видите, изображение создается просто и быстро.

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

  • полученный ранее рисунок (фавикон) закачать в корневую папку сайта;
  • в коде html «Заголовок» (header php) приписать код ссылки, которая показывает, где лежит картинка.

Рассмотрим размещение изображения для сайта, сделанном на движке WordPress. Картинку можно загрузить либо напрямую в папку с хостинга, либо с помощью FTP клиента.

Рассмотрим прямую загрузку. Через хостинг заходим в «Файловый менеджер» (хостинг TimeWeb), выбираем наш сайт, открываем папку public_html, выбираем папку wp-content, открываем папку themes (темы), выбираем тему, установленную на сайте.

В моем случае это zeestyle, тоже открываем ее и открываем папку «images» (рисунки). Теперь в эту папку закачиваем наш ранее изготовленный рисунок. Можно определить и другую директорию для закачки, важно правильно потом прописать путь в коде. Как закачивать картинку, здесь рассматривать не будем, сложного там ничего нет. Если возникнут у новичков трудности, обращайтесь.

Теперь переходим ко второму действию – размещаем ссылку на нашу картинку в коде html «Заголовка» (header php). Для этого идём в админпанель сайта, «Внешний вид», «Редактор», «Заголовок» (header php). Находим закрывающий тег </head> и перед ним вставляем код (скрин 4):

 <link rel="shortcut icon" type="image/ico" href="http://bizisk.sviluppo.host/wp-content/themes/zeestyle/images/favicon.ico"/>
Фавикон_4

Скрин 4

И создаем фавикон онлайн. По большому счету эта ссылка взята с сервиса по генерации, но адаптирована по конкретный сайт. Для переделки кода под себя, Вам надо будет заменить URL Вашего сайта (выделено розовым цветом) и прописать правильный адрес, куда Вы закачали картинку (выделено зеленым цветом), указать название картинки (выделено красным цветом). Ваш адрес, скорее всего, будет отличаться от моего, в папке темы надо найти папку images, но основа адреса будет такой.

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

После выхода версии WordPress 5.0; 5.1; 5.2; 5.3 и выше, порядок установки фавиконов изменился. Теперь нужно адаптировать их под мобильные устройства. О том, как это делается, показано в представленном ниже видео:

Вот таким простым способом Вы сможете изготовить и разместить на своем сайте уникальный фавикон. Ваш сайт (блог) будет узнаваем читателями и будет выделяться в поисковой выдаче. Удачи Вам!

С уважением, Иван Кунпан.

P.S.  Если Вы читаете эту статью, значит у Вас есть блог. Для того, чтобы блог правильно развивался, чтобы на нем было много посетителей, нужно блог правильно сделать, делать его в определенной последовательности, тогда не будет грубых ошибок и блог будет правильно развиваться.

Могу представить Вам мой  3-летний опыт создания и ведения блога в виде интеллект карты. По ней Вы сможете проверить правильно Вы создавали блог или нет, и при необходимости исправить ошибки. Скачать интеллект карту можно с блога. Статьи тоже сильно влияют на продвижение блога. О том, как правильно писать и оптимизировать статьи написано в моей бесплатной книге «Как написать статью для блога», её можно скачать.

Просмотров: 2651
10 комментариев на “Создаем фавикон онлайн
06.06.2014 в 21:52

Когда человек хочет узнать — он исследует, когда он хочет спрятаться от тревог жизни — он выдумывает.

09.06.2014 в 15:02

Фавикон выделяет человека, показывает его индивидуальность.

torg
30.07.2014 в 21:26

Я против многих не нужных идей для сайтов.
Но свой favicon должен иметь каждый сайт.
Favicon — полезная иконка каждому сайту.
Я обычно делаю 16*16 размер.
Чтобы быстро грузилось.
Думаю может перейти на 32*32 или остаться на 16*16.

31.07.2014 в 00:01

Фавикон очень нужный и полезный атрибут сайта, я с Вами согласен на все 100%. Вы знаете, самому даже легче искать свои статьи в Яндексе по фавикону. Фавикон делать надо обязательно, только ставить его лучше с помощью кода, а не плагина.

20.05.2015 в 13:44

Фавикон нужен. Это моё мнение. В Яндексе себя легче искать. Гугл сейчас проводит политику, что подобные изображения мешают и отвлекают читателей.

21.05.2015 в 10:01

Фавикон чрезвычайно удобная штука, как для читателей, так и для владельца блога. Кстати, последняя информация в Интернете говорит о том, что Google не получил результата от того, что он убрал фото из поисковой выдачи. Вполне вероятно, что он вернет назад именные сннипеты.

21.05.2015 в 17:03

Читал отрывок интервью Шмидта — руководителя, принимающего решение по поводу фавикона. Он утверждал, что фавикон отвлекает читателей и признан неудавшимся экспериментом.

23.05.2015 в 10:58

Конечно, разработчики смотрят со своей колокольни, а мы блоггеры с другой. Не всегда то, что делают разработчики правильно. Но мы вынуждены подстраиваться под требования ПС, тут ничего не поделаешь. Но мы можем писать отзывы и письма. Если таких отзывов будет много, то вполне могут к нашим предложениям прислушаться. А почему нет?

22.01.2017 в 18:45

все верно, я фавикон уже несколько раз меняла, у меня это делается через настройки в теме, и сразу появляется нужная картинка

23.01.2017 в 16:24

В новых темах заложена такая возможность. Но часто менять не советую, люди не успевают привыкать.

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

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