Home / Сайтостроение / Как сделать фавикон для сайта или блога?

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

Привет, друзья! Слышали ли вы когда-нибудь про фавикон (favicon)? Если нет, то эта статья для вас.

как сделать фавикон

Фавикон (favicon) – это маленькая иконка, которая отображается во вкладке браузера перед доменным именем сайта, или на странице результатов поиска перед вашей ссылкой.

Слово Favicon сокращенное от англиского FAVorites ICON, что означает значок для избранного. Фавикон имеет стандартный размер 16×16 пикселей и загружается на сайт в формате ICO.

Вот как выглядит фавикон во вкладке браузера:

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

И на странице результатов поиска:

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

Фавикон можно сделать и добавить на сайт несколькими способами:

  • Заказать у фрилансера и загрузить собственный уникальный фавикон;
  • Нарисовать онлайн;
  • Уменьшить картинку большего размера и изменить формат на ICO;
  • Взять любой готовый фавикон из библиотеки и загрузить себе;

Я расскажу о нескольких сервисах, где можно сделать фавикон для сайта.

Генератор фавикон – favicon.cc

favicon_cc

Один из лучших генераторов фавикон — favicon.cc (ссылку давать не буду, просто скопируйте домен и вставьте в адресную строку браузера).

Здесь можно самому нарисовать фавикон, правда нарисовать что-то стоящее на 16 квадратиках не получиться.

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

После того как фавикон нарисован, его можно скачать на компьютер.

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

фавикон из библиотеки

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

изменить размер картинки

Генератор фавикон – favicon.ru

favicon_ru

Еще один полностью русскоязычный генератор фавикон — favicon.ru

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

Генератор фавикон favicon.by

favicon_by

На сайте favicon.by вам не нужно ничего рисовать, можно просто загрузить свое изображение и сгенерировать фавикон как в обычном статичном виде, так и в аннимированном, и скачать его ZIP-архивом. Но сразу хочу предупредить, что аннимированный фавикон поддерживается не всеми браузерами.

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

Чтобы установить фавикон на сайт, нужно его просто загрузить в корневую директорию вашего сайта или блога через FTP клиент или через браузер.

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

Адрес корневой директории должен быть следующий:

http://ваш сайт/favicon.ico

Зачем нужен фавикон сайту?

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

При добавлении нового фавикон на сайт, во вкладке браузера, он должен сразу отображаться. А вот на странице результатов поиска, появится не сразу, пока поисковые системы не проиндексирую фавикон. Это займет некоторое время, может и несколько месяцев индексировать, по крайней мере, так было с моим первым сайтом.

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

32 комментария

  1. Андрей:

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

    Ответить
    • Андрей Назыров:

      Зато у вас уникальный фавикон. Редко кто из блоггеров в качестве фавикон ставит свое фото.

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

    Ответить
  3. А я фавикончик сам нарисовал. Парусник — это путешествие, чему и посвящен мой блог 😉

    Ответить
    • Андрей Назыров:

      😉 отличный фавикончик!

      Ответить
  4. Всем привет! Спасибо Андрею за очередную интересную статью. Раньше я думала что можно взять картинку и загрузить ее на сайт. О других способах соответственно не слышала. Рисовать я к сожалению в редакторах не умею. Рядом с именем и есть моя иконка, которая стоит на моем блоге.

    Ответить
    • Андрей Назыров:

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

      Ответить
  5. Иконочка нужна, вот недавно посмотрел, что у меня её нет, а стандартная выбрасывает ошибку — и теперь как раз задумался сделать, на то лог на хостинге из за того что её нет растет как на дрожжах 🙂

    Ответить
  6. Точно, надо бы себе фавикон сделать. А то я выбрал из готовых наиболее подходящий, типа временно. Но как мы знаем, то что делается временно зачастую остается постоянным 🙂 Спасибо за статью. В ближайшее время займусь фавиконом.

    Ответить
  7. Ольга:

    А я бы не сказала, что редко 🙂 Многие кто советую ставить фото в фавикон. И у меня когда-то стоял, но потом решила обойтись без фото. Все равно качество не очень было))

    Ответить
  8. Фавикон классная штука. Он запоминается посетителям. Правда больше запоминают логотип, но в продвижении важны все мельчайшие детали. Лично мне помогает мой фавикон определять быстрее свои позиции в Яндекс. То есть не по ссылкам смотрю, а на favicon.

    Ответить
  9. Я вообще не встречал файвиконы в виде фото — счас же пойду посмотрю что там у Андрея!

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

    Ответить
  11. В идеале в фавиконе должен отображаться логотип.

    Ответить
  12. Елена:

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

    Ответить
    • Андрей Назыров:

      Пожалуйста, Елена. У вас симпатичный фавикон.

      Ответить
  13. Без фавикона сайт в поисковой выдаче как-то не цепляет глаз (актуально для Яндекса).
    Я делал свой фавикон в сервисе favicon.cc

    Ответить
  14. Александр Череп:

    Я где-то скачал уже готовый, уже и не помню где.)))

    Ответить
  15. Елена, я тоже самое, люблю на все готовенькое 🙂

    Ответить
  16. Я уже ставил фавикон, потом обновил тему и он пропал…
    Надо опять сделать! Спасибо за статью, она очень вовремя!)

    Ответить
    • Андрей Назыров:

      Пожалуйста, Азик.

      Ответить
  17. Меня берет в смех, когда я вижу стандартный фавикон (типа ucoz, joomla)))

    Ответить
  18. Я всегда запоминаю сайты по фавиконам. Кстати, встречала много блогов, где фавикон -это фото. Многие делают сайт по урокам, там предлагают установить плагин, который отображает фавикон, и из много вариантов там есть и фото граватара. И автор думает, что этот вариант будет лучше, потому что он уникальный, а не шаблонный.
    У меня сначала был шаблонный фавикон из варианта предлагаемых, потом фото, а потом лично нарисованный, как сейчас. Всем советую быть уникальными, не надо шаблонных, может это сложнее, но всегда можно попросить кого-нибудь нарисовать и переслать вам файлик. Для кого-то это три минуты, а человек будет благодарен. 😉

    Ответить
    • Андрей Назыров:

      Я просто удивляюсь с тех, кто выводит фавикон плагином 🙂

      Ответить
  19. Давно хочется поменять фавикон! Думаю сначала лучше разберусь с логотипом. А свой фавикон делал так, как написано у тебя в статье!

    Ответить
  20. У меня фавикон выведен плагином, я просто на хостинг закачала свою картинку. Я бы не сказала, что это сильно грузит блог, но понимаю, что многие избавляются от плагинов. Возможно, и мне следует)))

    Ответить
  21. Юрец, а я сам делал, правда как страшная получилась, но точно уникальная!

    Ответить
    • Я тоже пробовал сделать себе фавикон очень страшненький и я отказался от затеи самостоятельного изготовления

      Ответить
  22. Я себе в фотошопе недавно нарисовал. Не верх совершенства, но пойдет.

    Ответить
  23. Я себе тоже сделал через генератор фавикон, всё равно хоть как то но с ним блог выделяется)

    Ответить
  24. Женя Климович:

    Лично для меня было главной проблемой придумать фавикон, а не реализовать его. Но в целом вы доступно все объяснили, Андрей. Думаю новичкам это пригодиться.

    Ответить
  25. Пользуюсь favicon.ru. Надо будет, кстати, попробовать заказать у них Favicon — интересна разница. Конечно я её не увижу из-за ограничений по зрению, но родные и друзья смогут сравнить сгенерированную фотографию и созданную под заказ.

    Ответить

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

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