Как сделать фавикон для сайта?




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

Речь идет о сайте favicon.cc. Кстати, .CC — это доменная зона Кокосовых островов, скоро напишу пост о ней, раз уж зашла речь. Ну что ж, давайте сделаем фавикон для сайта.

Делаем фавикон для сайта

Для начала расскажу, что такое фавикон.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Традиционно используются изображения размером 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico

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

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

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

Делаем фавикон на сайте favicon.cc

Вот скриншот рабочего окна сайта favicon.cc

Cкриншот рабочего окна сайта favicon.cc
Cкриншот рабочего окна сайта favicon.cc

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

В центре — рабочая зона, место, где делается фавикон.

Справа — область инструментов для изготовления фавикона.

Фавикон из готового изображения

Нажимаем на кнопку Импорт изображения (Import Image). Оговорюсь, что у меня браузер Гугл Хром и он автоматом переводит английский текст. После нажатия кнопки выскочит окно загрузки изображения. Такое:

Окно загрузки изображений
Окно загрузки изображений

Тут все  просто — загружаем картинку с жесткого диска. Кстати, на скриншоте видны форматы картинок, которые подойдут для обработки. Это jpg, jpeg, gif, png, bmp, ico, cur.

Для примера я загрузил свою фотку с аватара.

Загрузил свою аватарку
Загрузил свой аватар

В процессе работы вы можете сразу видеть результат. Во-первых, вверху, в закладке браузера.

Вид фавикона во флажке вкладки
Вид фавикона во флажке вкладки

Во-вторых, чуть ниже рабочей области, в окне Предварительный просмотр.

Вид фавикона в окне Preview
Вид фавикона в окне Preview

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

Рисование фавикона

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

Рабочее окно для создания фавикон
Рабочее окно для создания фавикон

В результате некоторых усилий вы получите какую-то картинку в рабочей области. Тут уже каждый творит в меру своих способностей. У некоторых получаются просто шедевры. Для примера, на скрине показана "нетленка", которую я по-быстрому сваял  для своего сайта. Увы, с рисованием не очень дружу. Но вроде, как что-то оригинальное получилось. Результат вы можете увидеть в браузере.

Образец нарисованного фавикона
Образец нарисованного фавикона

Закончив работу, вы сохраняете готовый фавикон также, как и в первом случае. На выходе у вас получится файл favicon.ico. Именно в таком формате сервис favicon.cc сохраняет готовые файлы и именно в таком формате требуется установка фавикона на сайт для корректного отображения браузерами.

Итак, сегодня рассмотрена тема как сделать фавикон для сайта. Как его установить на сайт, расскажу в другом уроке. Удачи!




There are 21 Comments

  1. Опубликован Андрей Ответить

    Наглядно и актуально! Спасибо!

  2. Опубликован Оксана Яшная Ответить

    Вы так доступно пишете статьи, что любой новичек сможет это сделать.

    • Опубликован Марник Владимир Ответить

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

  3. Опубликован Ксения Ответить

    Отличная подробная инструкция

  4. Опубликован Алена Ответить

    Вы знаете, Владимир, я самостоятельно натыкалась на это сервис. Но тогда его просто «не заметила». А вот вы сейчас так хорошо все описали, что сразу его в закладки. И вашу статью по работе с ним )))

  5. Опубликован Сергей Стрелков Ответить

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

  6. Опубликован Ирина Ответить

    Владимир! Отлично всё рассказали! Так просто и доступно. Теперь задумалась: а может поменять , придумать что-то новенькое? Нужно попробовать.С уважением, Ирина.

  7. Опубликован Павел Ответить

    Спасибо за полезную информацию.

  8. Опубликован Лариса Ответить

    Интересно! А я себе в фотошопе просто картинку ужала, теперь понимаю, почему она не во всех браузерах отображается — из-за расширения.

    • Опубликован Марник Владимир Ответить

      Тут дело вот в чем — фавикон может быть сделан в разных форматах: ico, png, jpeg, gif, svg.
      Но они по-разному будут отображаться разными браузерами. То есть не все браузеры понимают все форматы.
      Особенно капризен IE. Opera наоборот видит все форматы.
      И только один формат — ico — понимают все браузеры.

  9. Опубликован Алексей Фомичев Ответить

    А я вот сначала подготавливаю файл в фотошопе и только потом пользуюсь прикладными программами для создания иконок. Материал изложенный в статье хороший и понятен для всех пользователей.

  10. Опубликован Сергей Ответить

    Актуально для меня. Спасибо.

  11. Опубликован ecoturist Ответить

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

  12. Опубликован Юрий Ответить

    Нарисовать просто. Сохранить — никак. Даже после регистрации.

    • Опубликован Марник Владимир Ответить

      Юрий, я не понял, где не получается сохранить. Если на сервисе favicon.cc, то этого не может быть — только что зашел, проверил -все работает. Кнопка Download Favicon — и картинка сохраняется в загрузках под именем favicon.ico
      Если на сайте, то, возможно, причина в том, что кэш браузера не удаляется сразу. Кстати, у вас на блоге установлен фавикон — две зеркальных буквы Ю — это из старых запасов?

  13. Опубликован Юрий Ответить

    Нет, это заставочка с Вашей подачи, только испечённая, спасибо! Немного помаялся с определением пути к файлу, он у меня пролегает через wp-content/uploads. А то мне подсказывали public_html, что ли? Ну, да ладно. Спасибо ещё раз!

    • Опубликован Марник Владимир Ответить

      В основном в WordPress favicon.ico лежит в корневой папке, которая и есть public_html. Но в некоторых шаблонах свое место прописано. На таких блогах можно прописать следующий код между тегами
      Обычно, в вордпрессе эти теги находятся в файле header.php

  14. Опубликован Антонина Ответить

    Я и не знала, что есть такой простой способ. Все в фотошопе делаю)))

  15. Опубликован Алевтина Ответить

    В моей теме был готовый фавикон, но он невзрачный такой, приготовила другой, взяла из картинки красивое море, но не получилось у меня, а сейчас прочитала хорошую подробную статью и попробую ещё раз.
    Алевтина приглашает в гости ⇒⇒ Целебные водные источники КрымаMy Profile

  16. Опубликован Елена Ответить

    Я свой фавикон в фотошопе делала, потом онлайн-сервисом воспользовалась, чтобы его в нужный формат перевести.
    Елена приглашает в гости ⇒⇒ Классная упаковка своими руками: да, это же просто коробочка!My Profile

Оставить ответ

CommentLuv badge