Для чего нужно создать favicon для сайта? Выбираем сервисы для создания фавикон онлайн

Приветствую вас на блоге vitalykalinin.ru. Сегодня хочу познакомить вас с сервисами по созданию фавикона для вашего сайта. Favicon  – это сокращения английских слов favorite и icon. Это картинка размером 16 на 16 пикселей, которая носит название favicon и имеет расширение ico. Она помещается в корневую папку вашего сайта на хостинге. При загрузке сайта браузер автоматически ищет этот файл, затем добавляет его в адресную строку перед URL страницы и в закладки, присваивая его вашему сайту. Никакой практической пользы иконка веб-сайта не несёт и служит только его узнавания.Создать Favicon для сайта

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

По умолчанию, для веб-сайта отображается значок, который предусмотрен для этого в текущем браузере. Так же большинство версий современных браузеров поддерживают персональные фавиконы сайтов. А в поисковой системе Яндекс, которая сейчас доминирует вместе с Google на русскоязычном пространстве, при поисковом запросе, ранжируемые сайты появляются вместе со своей иконкой. Поэтому, не откладывая на потом, обязательно необходимо уделить её созданию пристальное внимание.

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

Нужно создать favicon для сайта? Рассмотрим сервисы для создания фавикон онлайн

Самый популярный сервис для создания иконки для сайта Favicon.ru. Работать в нём достаточно просто и с этим справиться даже начинающий пользователь. Мы загружаем картинку, которую хотим видеть в качестве иконки сайта. Он её обрабатывает. Смотрим получившееся изображение и если оно нам подходит, то нажимаем Скачать. Автоматически сохраняется файл с название favicon.ico. Можно и самостоятельно попиксельно порисовать и если понравится, то тоже сохранить как иконку. Важно, чтобы для создания фавикона использовался простой рисунок. Если будет много всего разноцветного, то получиться невзрачное пятно.

Фавикон онлайнСледующий сервис, который так же прост в использовании – favicon.cc. Работа в нём приблизительно схожа с предыдущим аналогом. Единственное, что он англоязычный и здесь больше рекламы. Но в целом, действия по генерации достаточно похожи. Загружаете изображение, смотрите, редактируете и сохраняете.

Favicon для сайта Favicon.ccСейчас почти каждый ресурс предоставляющий услуги продвижения сайтов или сбора аналитики по ним, имеет дополнительную опцию по созданию фавиконов. Например, всем известные сервисы, которые тоже имеют эту дополнительную опцию:

Но мне нравятся сервисы, которые заточены непосредственно под создание. Вот, посмотрите, ещё один симпатичный онлайн инструмент для генерации иконок различных размеров и форматов GenFavicon. Скромненько и со вкусом. Загрузили наш файл. Выбрали размер. Предпросмотр и сохраняем на компьютер.

Создать фавикон - GenFavicon.comМожно было бы конечно использовать для создания иконки всеми любимый Фотошоп. Но он не сохраняет картинки с расширением ico. Вернее сохраняет, но для этого необходимо распаковать специальный плагин – icoformat.8bi установить его в папку Plug-Ins\File Formats в папке Фотошоп. Это позволит сохранять файлы с нашим нужным расширением. По мне, так это достаточно хлопотно.

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

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

Как же сделать так, чтобы иконка стала фавиконом для сайта?

Необходимы следующие шаги:

1Убедиться, что файл называется favicon.ico.

2С помощью Filezilla помещаем его в корневую папку нашего сайта. По идее, этих действий достаточно и браузер автоматически определит, где он находиться. Но мы перестраховываемся и прописываем html-кодом путь к этому файлу.

3Для этого берём файл нашей темы header.php (можно его редактировать в администраторской панели непосредственно в WordPress, а можно скачать его с сервера), открываем его и прописываем перед закрывающим тегом </head> следующий код:

4Сохраняем файл и переносим обратно на хостинг.

5Чистим кэш текущего браузера и всё. Получили искомый результат.

Кстати, не обязательно, чтобы фавикон располагался в корне. Атрибут href задаёт непосредственно путь к нему. Получается так:

Так же не обязательно, чтобы значок был с расширение ico. Можно использовать также расширения png и gif . Для этого в коде меняется тип выводимого файла.

То есть меняем type с image/x-icon на image/png или gif.

Кстати, можно добавит ещё кое-что. Мы создали и поставили фавикончик для сайта, а в администраторской панели WordPress, остался стоять по умолчанию стандартный фавикончик. Чтобы он изменился вообще везде, нужно в файл нашей темы function.php, вставить следующий php-код:

Теперь он отразится во всех заголовках.

На этом, в общем-то, и всё. Сегодня мы обсудили, зачем нужно создать favicon для сайта и рассмотрели онлайн сервисы по созданию фавикон для сайта и тонкости её установки. Не забывайте подписываться на обновления блога. До скорых встреч!

Смотрите видео, как создать favicon.ico и разместить его на хостинге:

С уважением, Виталий Калинин!

Читайте ещё интересное на блоге
Заработать на Seosprint - это возможность создать дополнительный доход
Для движения вперёд необходим порядок в голове. Для этого убирается лишняя информация
Необходимо сделать картинку ссылкой? Или нужна кнопка ссылки? Даю 4 способа, как сделать это
Размещаем счетчики посещений сайта в одну линию + хорошая новость на блоге
AddMeFast.com - эффективная накрутка поведенческих факторов
Как провести оптимизацию видео на Ютуб, используя настройки youtube видео
Понравилась статья? Поделитесь с друзьями!

Оставьте свой первый комментарий и получите ценный подарок

Комментариев 7 на “Для чего нужно создать favicon для сайта? Выбираем сервисы для создания фавикон онлайн
  1. Ох, и намучалась я когда-то со своим первым фавиконом, а сейчас их мгновенно делаю для новых сайтов. Жаль в то время мне такой урок не встретился.

    • Спасибо, Светлана, за отзыв! Когда нужно сделать что-то впервые, всегда это кажется труднее, чем есть на самом деле.

    • Не переживайте, У меня через 2 неделе появился в Яндексе. Может и со следующим апдейтом появиться.

  2. Очень полезная статья.Жалко в свое время она мне не попалась.Интересные предоставлены сервисы по созданию фавикона.

Comments are closed.


Внимание! На блоге проводится конкурс лучшего комментатора за месяц!

Хостинг