Как создать фавикон для сайта онлайн? Проверенная подборка

создать фавикон для сайта онлайн Полезное

Здравствуйте, уважаемые читатели блога web-zarabotok.info.

На связи Могиш Иван и сегодня в этой статье я расскажу вам все о фавиконе для сайта. А именно, что такое фавикон, ознакомлю вас с сервисами для онлайн-создания фавикона и научу устанавливать его на сайт.

Итак, давайте начнем…

Что такое фавикон?

Фавикон (Favicon) — это небольшой значок (иконка) сайта, который отображается браузером во вкладке перед названием страницы, и в качестве картинки — в разделе «Закладки». Также они отображаются рядом с названием сайта в списке выдачи некоторых поисковых систем (например, Yandex).

Вот так фавикон выглядит в закладках Google Chrome:

фавикон в браузере

Также фавикон сайта вы можете увидеть в адресной строке браузера перед url или возле заголовка закладки, в истории браузера:

фавикон в закладках

Преимущества использования фавикона

  • Запоминаемость

Фавиконы повышают запоминаемость вашего сайта, особенно если постараться сделать его оригинальным и соответствующим тематике сайта.

  • Оригинальность

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

  • Информативность

Хорошо подобранный фавикон должен в маленьком изображении размером с горошину отражать суть вашего сайта.

  • Узнаваемость

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

Особенности отображения фавикона в поисковых системах

Существует определенная особенность отображения фавикона в поисковых системах. Например, в Яндексе фавиконы отображаются в выдаче. И даже существуют отдельные поисковые роботы для индексации фавиконов.

В Google, например, отображения фавиконов в выдаче нет. Но для браузера FireFox, Google разработал специальное расширение которое позволяет видеть фавиконы в выдаче. Скачать его можно [urlspan]здесь[/urlspan].

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

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

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

Так, выглядит страница генерации фавикона:

страница генерации фавикона в logaster

Перед созданием вам нужно будет создать лого, но это всего 4 шага которые не займут у вас много времени.

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

Промокод для Logaster (2016)

[adsense1]
Подарок от Logaster для всех читателей блога web-zarabotok.info. 10% скидки на покупку любой продукции.

При оплате нужно ввести этот код: web-zarabotok#2016.

промокод для logaster

Другие сервисы

[urlspan]Favicon.cc[/urlspan], пожалуй, один из самых простых онлайн-генераторов для создания фавикона. Работать с генератором очень легко, у вас будет 256 пикселей для его создания. Для начала перейдите на сайт Favicon.cc. Вы увидите рабочее окно:

favicon-cc

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

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

После формирования фавикона вы сможете его скачать, нажав, кнопку Download favicon.


[urlspan]Amichurin.Appspot.com[/urlspan] — это полностью русскоязычный сервис, с простым и понятным функционалом. Он не дает возможности сделать сложный фавикон, но берет своей простотой в использовании.
[adsense2] amichurin-appspot-com
[urlspan]Favicon.ru[/urlspan], сервис который по своему функционалу очень напоминает Favicon.cc. Но он имеет преимущество, более качественно проработанный интерфейс.

favicon.ru


[urlspan]Pr-cy.ru[/urlspan] В этом сервисе весь процесс заключается в том что вы загружаете свое изображение, какую-то готовую картинку и на основе нее сервис делает фавикон. По сути, он преобразует вашу картинку в ico формат.

pr-cy-ru-logo

Как добавить фавикон на сайт?

[adsense3] Итак, вы уже сделали фавикон. Что делать дальше?

Нужно дабавит несколько HTML строк в файлы сайта. Те, кто мало общего имеет с разного рода кодами, не пугайтесь. Все довольно просто.

В этом случае, вам предстоит сделать два шага:

  1. Добавьте файл под названием favicon.ico в корневой каталог вашего сайта (т. е. в папку, где находятся wp-content, wp-admin и т. п.).

Не стоит размещать его ни в какой другой папке. Практически все браузеры будут искать для загрузки фавикон именно в корневой папке.

  1. Пропишите в заголовках HTML-страниц (как правило, между тегами <head> и </head>) следующий код:

<link href="http://ваш-сайт.ru/favicon.ico" ENGINE="image/x-icon">

<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

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

При возникновении такой проблемы, рекомендуем использовать временный HTML-код:

http://example.com/favicon.ico?v=2" />

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

В итоге

Фавикон играет большую роль при идентификации вашего ресурса: делает его запоминающимся и оригинальным. Также наличие фавикона стимулирует пользователя к посещению сайта.

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

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

Создание фавикона через онлайн-сервис наиболее выгодный вариант с точки, зрения качества, затрат времени и цены.

Спасибо за внимание. Надеюсь, что статья вам понравилась и вы нашли ответы на все вопросы. До встречи!

С уважением, Могиш Иван

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

  1. Александр

    Я себе фавикон делать кажись на Pr-cy. Сначала сделал картинку которую хотел, а топом сделал фавикон. Только никакой код я нигде не прописывал. А зачем он нужен? Я просто залил файл в корневую папку, и фавикон сам появился. 😉

    Ответить
    1. admin автор

      Значит у вас, уже был прописан код для вывода фавикона.

      Ответить
  2. IvYur

    Я тоже так делал. Создал, залил его в папку. Правда сразу не появился, но спустя некоторое время уже был.

    Ответить
  3. Галиулин Руслан

    Да в фотошопе, просто размер делаем 16х16 пикселей и вставляем картинку. Сохраняем и прописываем название с расширением .ico 😉 😉

    Ответить
    1. IvYur

      Не все так просто. Сразу идеи пропадают как начинаешь рисовать )))

      Ответить