Favicon для сайта — как средство привлечения посетителей!

Приветствую всех на своем блоге olegastanin.ru! Сегодня у нас на повестке дня очень интересная тема. Мы будем создавать маленькое изображение в фотошопе своими руками, которое называется favicon. Это маленькая пиктограмма в адресной строке браузера, находящаяся слева от адреса сайта.

Favicon для сайта

Favicon для сайта используется для привлечения внимания. Фавикон, это ваш маленький опознавательный знак в большой всемирной паутине Интернет. Он помогает находить ваш сайт гораздо быстрее и выделяет ваш ресурс среди других, «серых» ресурсов. Сегодня я расскажу вам, как создать favicon или по простому как сделать иконку для сайта, как подключить его к сайту и где можно увидеть фавикон в действии!

Favicon — это маленькое изображение, размером 16×16 пикселей, несущий в себе брендовое значение, например, уменьшенное изображение вашего логотипа может быть отображено в фавиконе. Favicon также является значком сайта, который отображается в заголовке окна браузера. Вот, например, мой фавикон — буква «А», что означает первую букву моей фамилии. Я его сделал сам. Вот как он отображается.

Favicon для сайта

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

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

Отображение Favicon в поисковой выдаче

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

Теперь поговорим, о том, как же создать этот самый favicon для сайта. Есть несколько способов. Мы рассмотрим способ, который я сам использовал при создании своего фавикона.

Если у вас есть фотошоп, то можно создать фавикон в фотошопе. Опишу процесс создания. Открываем фотошоп и создаем новый проект размером 300×300 пикселей.

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

Выбирайте инструмент «Горизонтальный текст» и пишите любую букву, какую пожелаете, желательно, чтобы буква была на латинском, но можно использовать и кириллицу. Пишите букву, делайте её большой, и придайте нужный цвет. Я буду делать фавикон из буквы «А».

Создание Favicon в фотошопе

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

После всех манипуляций нам нужно пройти на сервис FAVICON.CC и загрузить изображение для создания фавикона. Изображение для фавикона в стандартном расширении .jog, .gif, или .png нам не подойдет. Оно не будет читаться. Нужно, чтобы пиктограмма фавикона была в формате .ico. Это формат иконок.

 

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

Создание фавикона для сайта в фотошопе

И только потом загружаем его в этот сервис и генерируем favicon.ico. Делается это проще простого, но тут есть маленькая хитрость. Главное выберите нужны вариант сжатия, иначе фавикон может размыть очень сильно.

Сервис favicon.cc для создания фавиконов

Вас перенесет на страницу загрузки изображения favicon. Выберите то самое изображение, что мы подготовили в фотошопе и загрузите его.

Загрузка изображения для создания фавикона

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

Под экраном будет кнопка для скачивания. Найдите её и скачайте favicon себе на компьютер.

Скачать фавикон для сайта

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

Для Вордпресс

Для простых сайтов

Не забудьте положить ваш favicon в корень вашего сайта. Иначе ни чего работать не будет. И еще такой момент. Поисковые системы не сразу увидят ваш favicon. Должно пройти какое-то время. Порой очень долго. Но оно того стоит.

Второй и самый простой способ сделать Favicon для сайта на Вордпресс

Делаем фавикон онлайн. Это самый простой способ сделать Фавикон для сайта на  WordPress. Итак, для начала Вам нужно будет выбрать картинку на фавикон среди уже имеющихся на сайте audit4web.ru

 

2016-02-28 12-14-03 Галерея иконок для сайта favicon.ico 16x16 Рекламное агентство «Веб Аудит» – Yandex

Это уже готовая коллекция фавиконов на любой вкус и цвет. Вы только представьте 15 000 фавиконов, иконки для сайта в огромном количестве для Вас, можно скачать любой Favicon

2016-02-28 12-16-49 Галерея favicon.ico (часть 9 из 16) Рекламное агентство «Веб Аудит» – Yandex

Выбираем любой понравившийся и сохраняем его к себе на компьютер!

2016-02-28 12-18-50 Скриншот экрана

После чего открываем свою админку сайта на Вордпресс и переходим во вкладку Внешний вид — настроить.

2016-02-28 12-22-10 Обновления WordPress ‹ Заработок на кликах — WordPress – Yandex

Затем во вкладку Свойства сайта, см. картинку ниже.

2016-02-28 12-23-34 Настройка Загрузка… – Yandex

Вам предлагают выбрать иконку сайта — это и есть тот самый заветный фавикон.

2016-02-28 12-24-42 Настройка Загрузка… – Yandex

Осталось только указать путь до картинки которую Вы выбрали ранее на сайте готовых фавиконов и загрузить ее себе на сайт.

2016-02-28 12-27-11 Настройка Загрузка… – Yandex

Нажимаем Сохранить и обрезать

2016-02-28 12-28-50 Настройка Загрузка… – Yandex

Затем нажимаем сохранить и опубликовать

2016-02-28 12-30-33 Настройка Загрузка… – Yandex

Получаем Фавикон себе на сайт! Все очень просто! 

2016-02-28 12-32-53 Клики $ - Заработок на кликах - Заработок на кликах – Yandex

Теперь вы знаете как сделать фавикон себе на сайт на Ворпресс самым простым и быстрым способом! Если есть вопросы задавайте их в комментариях, постараюсь ответить на все.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 19 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 10 комментариев к этой статье:
  • Константин Карнаухов, 03.03.2013 в 18:40

    А я Gimp пользуюсь! Там поддерживается формат .ico вот так перескакал бесплатный редактор платный в таком небольшом нюансе. И для Apple-устройств, как iPhone, iPad и т.д. нужна другая иконка размером 57 на 57. Добавляется apple-вская иконка через тег

  • Олег Астанин, 03.03.2013 в 21:30

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

  • Юрий Ваценко, 29.05.2014 в 12:44

    Олег, фавикон очень нужен, я это хорошо усвоил.

  • Олег Астанин
    Олег Астанин30.05.2014 в 00:57

    я очень часто ищу сайты по фавикону, ну просто это тупо быстрее...)))

  • Ivanovskij, 21.08.2014 в 00:49

    Прикольно получилось :)

  • Олег Астанин
    Олег Астанин28.02.2016 в 16:44

    Теперь вы знаете как установить фавикон! Есть вопросы, задаем!

  • Софья03.04.2016 в 20:52

    Здорово! Даже не знала, как это называется... Теперь буду знать))) Всё очень просто описано. Действительно нужная вещь, отображающая весь основной смысл сайта. Только нужно выбирать такой фавикон, чтобы он был прост для воспрятия.

  • Наталья06.04.2016 в 12:58

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

  • Татьяна06.04.2016 в 17:20

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

  • den114207.04.2016 в 16:23

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

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter