Как сделать favicon (иконку) для сайта в онлайн генераторе

Как сделать favicon online для сайтаТема сегодняшней статьи — как сделать favicon online для сайта или блога на Вордпресс. Если вы по каким-то причинам еще не знаете, что это и зачем нужен этот файл, то рекомендую почитать, уже написанные мной по этой теме статьи:

В общем, эта маленькая картинка должна быть у каждого сайта.

Как создать favicon.ico для сайта

Итак, сейчас постараюсь рассказать где, чем и как сделать favicon. Но для начала надо знать, какого размера должен быть фавикон для сайта?

Favicon – это картинка в форматах ICO, JPEG, PNG, BMP и GIF, которая может иметь разные размеры, начиная с 16×16 пикселей. Иконку именно такого размера надо обязательно загрузить на сайт для индексации роботом Яндекса.

Другие размеры имеют второстепенную роль и не отображаются в поиске Yandex, а служат для отображения в браузерах, например, на iPhone или IPad. Если хотите, чтобы ваш сайт выделялся в поисковой выдаче, запомните следующее правило.

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

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

Если вы не большой знаток Photoshop, то не беда, в интернете существует много бесплатных сервисов-генераторов для создания favicon для сайта. Некоторые из них могут только конвертировать изображения в формат ICO, другие же дают возможность редактировать или создать фавикон с нуля. Предлагаю вашему вниманию небольшой обзор таких онлайн-генераторов.

Сервисы online favicon generator — создание фавикона онлайн

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

Простые фавикон генераторы

Для начала несколько сайтов, где можно легко сделать иконку для сайта, преобразовав любую картинку в файл favicon.ico, без возможности редактирования.

www.favicongenerator.com — пожалуй, самый минималистический сервис. Ничего лишнего — выбрали изображение, нажали кнопку “Generate Favicon!” и скачали созданную иконку.

Онлайн сервис favicongenerator.com

tools.dynamicdrive.com/favicon — простой и понятный сервис, где можно сделать favicon в трех размерах. Чтобы скачать полученные файлы, надо нажать на кнопку “Download FavIcon” под ними.

Создание favicon онлайн с помощью сервиса tools.dynamicdrive.com

www.cy-pr.com/tools/favicon и www.favicon.co.uk — сервисы, аналогичные предыдущему. В первом можно сделать размер фавикона 16×16 и 32×32, а во втором дополнительно 48×48 и 64×64.

www.genfavicon.com — весь процесс создания иконки включает в себя три шага:

  1. Выбираем файл (JPEG, GIF, PNG) на компьютере или просто прописываем URL картинки и жмем “Загрузить изображение“;
  2. Выбираем размер (16×16, 32×32, 48×48, 64×64 или 128×128) и необходимую область рисунка, если хотим сгенерировать только часть изображения, нажав “Захват и Изображение“;
  3. Смотрим результат и, если все устраивает, скачиваем файл.

Создание иконки для сайта за три шага

Создание анимированного favicon для сайта в онлайн генераторах

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

www.favicon.by — сервис на русском языке. Все, что требуется, выбрать файл, вписать текст на латинице (если надо) и нажать кнопку “Создать Favicon“. Ниже можно увидеть результат и скачать архив с файлами.

www.favicon.by — генератор favicon для сайта на русском языке

www.favicon.com.mx — сервис, полностью идентичный предыдущему, только на английском языке.

www.favicon.com.mx - сервис для создания анимированного favicon

Где сделать фавикон с нуля — online редакторы favicon

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

antifavicon.com — этот сервис, почему-то с приставкой анти, интересен тем, что позволяет самому создать файл favicon.ico, но не в виде картинки, а как текст на цветном фоне. Все что требуется, это ввести подходящие буквы и выбрать цвета. Кстати, свой фавикон я сделал именно здесь. Думал потом переделаю, а теперь привык уже.

antifavicon.com — создаем иконку favicon.ico из текста

favicon-generator.org — здесь, кроме конвертера, есть еще и редактор иконок. Кроме того, можно загрузить созданный фавикон в публичную галерею, где его смогут свободно скачивать другие пользователи сайта.

favicon-generator.org — простой online редактор фавиконов для сайта

favicon.ru — популярный российский онлайн-генератор, где можно, как создавать фавиконы из картинок, так и рисовать их. Так же тут можно заказать создание favicon специалистам за 20$. Интересно, кто-то там делает заказы?

favicon.ru — популярный русский сервис для создания favicon

www.favicon.cc — другой популярный генератор, похожий на предыдущий. Интересной особенностью этого сервиса является то, что здесь можно делать покадровую анимацию длительностью до 20 секунд.

www.favicon.cc — фавикон генератор с возможностью создания покадровой анимации

Увидеть анимированный favicon и скачать его можно в окне предварительного просмотра.

Анимированный favicon в окне предварительного просмотра

www.degraeve.com/favicon — еще один online favicon generator. Этот редактор, как и предыдущие, позволяет сделать прозрачный фон иконки.

www.degraeve.com — online favicon generator для рисования иконок для сайта

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

И все же, еще один онлайн-генератор иконок для сайта я приберег на потом. Этот сервис заслуживает отдельного поста, где я расскажу, как сделать favicon для iPhone, IPod Touch и IPad браузеров и подробнее остановлюсь на установке анимированных иконок на сайт. Кроме того, познакомлю Вас с сервисом Favicon Validator, где можно проверить и увидеть все значки favicon.ico, если этот файл содержит более одного изображения. Чтобы не пропустить, советую подписаться на обновления блога blogibiznes.ru. Всем пока!


Понравилась статья? Нажимай на кнопки:


Ответов 23 на “Как сделать favicon (иконку) для сайта в онлайн генераторе”

  1. А я никогда фавиконы не делал, всё время просто находил подходящие на забугорных сайтах с коллекциями фавиконов. Там их море и можно подобрать абсолютно любой. Хотя и как делать фавикон самому тоже будет не лишним знать.

  2. Свой первый фавикон сделал в favicongenerator.com, полезный сервис!

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

  4. Свой первый фавикон тоже делала в одном из таких сервисов, очень удобно. Потом сама уже делала с помощью фотошопа. Для новичков сервисы очень полезные!

  5. Спасибо, Олег! Думаю ты прав, дорогой, многим будет интересна эта статья!

  6. Надо будет попробовать сделать иконку. Спасибо за подробное описание.

  7. Виктор Муратов Ответить 03 Ноя, 2012 в 23:53

    Отличная статья, вы раскрыли тему полностью. Хотя свой фавикон я сделал давным давно, читал с интересом. Узнал много полезного и нового.

  8. Владислав Челпаченко Ответить 04 Ноя, 2012 в 19:58

    Здравствуйте,Олег !

    Хочу лично пригласить Вас поучаствовать в интересном марафоне для блоггеров «Видео-привет моим читателям».

    Цель марафона приблизить себя к своим читателям и повысить доверие.

    Надеюсь на ваш отклик ;)

    • Спасибо, Влад, за приглашение! Не уверен, что поучаствую, никогда перед камерой не выступал. Хотя кто его знает…

  9. Олег, у меня фавикон прописан кодом в файле. Проблема, которую не знаю как решить, заключается в том, что фавикон виден только на главной странице, его индексирует яндекс. На остальных страницах его нет. Не подскажите в чем причина и как исправить?

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

      • Олег! Зашла в админку, файл заголовок, исправила прямо там, но осталось все также. Наверное, еще что-то нужно править?

        • Зайдите сюда http://blogibiznes.ru/kak-ustanovit-favicon-na-sayt-wordpress.html и посмотрите, как выглядит код перед закрывающей скобкой. У Вас там пробел и слеш, попробуйте их убрать. Что-то не так. Потому что по ссылке в коде, должна открываться страничка с картинкой, а у Вас начинается загрузка файла.

  10. Полезный сервис, а с такой подробной инструкцией сделать фавикон не составит труда.

    • Олег! Все сделала,скопировала и вставила код нижний с Вашей страницы, тоже не помогло. Не знаю-как докопаться до истины. На хостинге файл находится в папке publish.

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

  11. Наталия Хоробрых Ответить 08 Ноя, 2012 в 12:46

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

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

  13. Очень удобная фича с кучей настроек, а главное очень быстро.

  14. Хорошая статья, достаточно много вариантов по созданию фавикона. Спасибо.

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