Как создать и установить favicon?

Как создать и установить favicon?

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

Что представляет собой файл favicon.ico

Это графический файл-иконка размером 1616 пикселей, который в каком-то смысле является лицом вашего сайта. Не знаю, можно ли назвать эту иконку логотипом Думаю, вряд ли. Все-таки логотип и favicon могут существенно отличаться друг от друга.

Фавиконка отображается в браузере в трех местах :

  1. Вкладки браузера
  2. Быстрые закладки
  3. Результаты поисковой выдачи

Вполне возможно, что есть места или элементы, где она показывается еще, но я об этом пока не знаю сам. Или просто не обращал на это внимания.

Как сделать favicon. Сервис №1

Если у вас на компьютере уже есть картинка (или фотография), которую вы хотите превратить в фавиконку, то если вы попробуете ее самостоятельно уменьшить до размеров 16 на 16 пикселей с помощью подручных графических редакторов (Photoshop, Paint и др.), то вы увидите, как сильно она потеряет в качестве.

После того, как я разочаровался в фотошопе, не справившимся с моим заданием, я полез в яндекс за ответом на вопрос как самому слепить фавиконку с помощью какого-нибудь онлайн-сервиса. Ознакомившись с ассортиментом, который мне предложил поисковик, я я решил воспользоваться сервисом www.favicon.cc

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

Итак, как же им пользоваться. Вам нужно загрузить изображение на сайт, нажав в меню на кнопку Import Image.

Желательно, чтобы ваша картинка представляла собой идеальный квадрат. Если одна сторона чуть меньше другой не беда! Сервис уменьшит ее до нужных пропорций сам для этого нужно просто выбрать пункт Shrink To Square Icon. После чего смело жмите на кнопку Upload!

О том, как будет выглядеть получившаяся иконка в браузере можно узнать на картинке снизу (Preview).

Сервис чертовски удобен тем, что редактировать иконку можно прямо там, в режиме онлайн. Причем все изменения по ходу того, как вы что-то убираете или дорисовываете в редакторе, отображаются мгновенно все в той же вкладке браузера. Чтобы загрузить фавиконку, после того, как все будет готово, нужно просто нажать внизу под превью кнопку Download Favicon.

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

В итоге я решил поискать другой сервис в надежде на то, что он сможет мне предложить кое-что получше.

Как сделать анимированный favicon. Сервис №2

Этот англоязычный сервис не поддерживает прозрачность изображения в отличие от предыдущего, зато он умеет создавать анимацию и, на мой взгляд, сжимает картинку чуть качественнее, чем прошлый. Вот его адрес: www.ifavicon.com

Чтобы начать им пользоваться, в левом меню выберите Favicon Generator и смело заливайте свою картинку. Внизу появится превью статичной иконки, а еще ниже ее анимированная версия.

Чтобы получить результат, жмите на кнопку с зеленой стрелочкой Get It Now — в вашу папку с загрузками упадет архив с целым набором иконок: одна с расширением .ico, ее анимировання версия в формате .gif и две .png с разрешением 1616 первая и 3232 вторая.

Как установить favicon.ico на свой сайт или блог

Уверен, что на сайты с разными CMS этот файл устанавливается точно так же, как на WordPress это когда его нужно просто поместить в корневой каталог. Но сейчас напишу только о том, что сумел проверить сам то есть как установить favicon именно на сайт с вордпресс.

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

Если вы такой же новичок как я, и когда-либо где-либо прочитаете, что то, что вы хотите установить (например, файл robots.txt), нужно кинуть в корневой каталог, знайте, что это та папка, название которой я написал выше, а не сама папка вашего сайта.

В общем, после того, как вы с помощью визуального файлового менеджера на своем хостинге или при помощи FTP-клиента зальете favicon.ico (должно быть именно такое название и именно такое расширение!) в public_html, то можете смело заходить на свой сайт и любоваться свеженькой иконкой она начнет отображаться в браузере автоматически. Поздравляю с отличным результатом!

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

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