Здравствуйте. В этой статье я расскажу: что же такое фавикон и для чего он нужен, а также как работать с favicon генератором.
План нашей статьи:
- Что такое фавикон.
- Где создать фавикон онлайн.
- Работаем с favicon генератором.
- Правильный вывод иконки на сайте.
- Готовая иконка.
Собственно три небольших пункта, которые мы и разберем.
Что такое фавикон.
Фавикон — (на английском Favicon) иконка показывающаяся на закладках вашего сайта, раньше этим словом называли закладки в браузере internet explorer.
Вот так выглядят закладки с иконками в браузере Google Chrome:
С помощью иконки можно повысить узнаваемость вашего проекта (иконку википедии все помнят?). Но ради одной лишь узнаваемости многие не станут создавать favicon. Для чего же нужно сделать фавикон.
Дело в том, что некоторые поисковые системы отображают иконку в результатах поиска. Например:
Как видим нахождение иконки на против заголовка сайта может привлечь внимание пользователя и тем самым повысить CTR (количество щелчков в процентах). Если же вам не хочется ставить фавикон онлайн, то вам нужно знать в этом случае иконка не отобразиться (будет пустое место вместо иконки).
Где создать фавикон онлайн.
Создать фавикон онлайн можно на следующих сайтах:
- favicon.ru
- favicon.cc
- cy-pr.com
- genfavicon.com
- tools.dynamicdrive.com
- favicon-generator.org
- faviconfactory.com
Я буду работать на примере favicon.ru. Основные моменты, которые нам необходимы знать:
- Размер изображения 16*16 пикселей для браузеров и поисковой системы Яндекс.
- Размер изображения 57*57 пикселей для мобильных устройств — iPhone.
Данные выше я привел для того, чтобы вы могли нарисовать вашу иконку с помощью визуального редактора, например Photoshop, если вы захотите.
Работаем с favicon генератором.
Захожу на favicon.ru и вижу 2 возможности:
- Нарисовать с помощью кисточки (я не художник мне не подойдет).
- Создать фавикон онлайн с помощью изображения.
Порядок действий:
1. Нажимаю на кнопочку “выберите файл”, выбираем файл и переходим к созданию нашей иконки.
Размер файла не имеет значения, потом мы его будем уменьшать до стандарта.
2. Незабываем выбрать границы (их не расписываю, главное чтобы смысл картинки остался, а размер уменьшился).
Выбрав границы щелкаем кнопку “Далее” и картинка сама уменьшиться до 16*16.
3. Вам остается просто нажать кнопку скачать favicon и следовать инструкциям (вам должна прийти ссылка на ваш email с готовой фавикон иконкой). Не пугайтесь как увидите свою картинку большими точкам, это так и должно быть ведь картинка 16*16 точек.
В итоге мой favicon выглядит так: 
Правильный вывод иконки на сайте (блоге).
После того, как мы создали нашу первую иконку нам необходимо:
1. С помощью FTP клиента положить вашу иконку в главный каталог сайта (блога). Например для меня это — webbomj.ru/favicon.ico
2. Просто зайти в административную панель на сайт и пройти в меню Темы => Редактор. И под тегом <head> в файле header.php (заголовок или шапка у всех по разному) и прописать следующие строчки:
<link rel="shortcut icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon" ><link rel="icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon">
Для Айфонов на понадобиться прописать еще ниже строку:
<link rel="apple-touch-icon" href="http:// путь до иконки/apple-touch-favicon.png">
[warning]Внимание для Айфонов нужно иметь иконку размером 57*57. Также не забудьте поменять в коде путь_до_вашей_иконки, на вашу ссылку где лежит сама иконка.[/warning]
Готовая иконка.
Для того, чтобы не работать с favicon генератором (для тех кто не хочет сделать фавикон онлайн) советую посмотреть следующие сервисы, на которых можно найти готовые, а главное достойные решения:
- audit4web.ru/info/favicon/
- favicon.co.uk/gallery.php
- iconj.com/gallery.php
Если вам понравилась статья я буду благодарен, если вы с помощью кнопочек социальных сетей поделитесь с вашими друзьями! При много благодарен!!!
Я заметил интересную тенденцию, некоторые сайты умышленно не делают себе Favicon. Это связано с тем, что именно таким образом можно выделяться в поисковой выдаче. Немного противоречиво, но возможно это работает =) Нужно проверять. Favicon generator Это.
Если забит весь топ иконками то выделиться можно, но….
По одному запросу топ забит иконками, а по другим не везде. Да и иконки не сильно увеличивают CTR
Всё таки favicon придаёт солидности сайту и легко узноваем
И делается это все с помощью favicon generator.
Вопрос, а если у меня html что прописать в head нужно или для index.html не будет работать?