Как сделать favicon (иконку) для сайта в онлайн генераторе
02 Ноя, 2012 
Комментариев 23
Тема сегодняшней статьи — как сделать favicon online для сайта или блога на Вордпресс. Если вы по каким-то причинам еще не знаете, что это и зачем нужен этот файл, то рекомендую почитать, уже написанные мной по этой теме статьи:
- Что такое и где скачать фавикон для сайта;
- Как установить иконку (favicon) на сайт или блог WordPress.
В общем, эта маленькая картинка должна быть у каждого сайта.
Как создать 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!” и скачали созданную иконку.
tools.dynamicdrive.com/favicon — простой и понятный сервис, где можно сделать favicon в трех размерах. Чтобы скачать полученные файлы, надо нажать на кнопку “Download FavIcon” под ними.
www.cy-pr.com/tools/favicon и www.favicon.co.uk — сервисы, аналогичные предыдущему. В первом можно сделать размер фавикона 16×16 и 32×32, а во втором дополнительно 48×48 и 64×64.
www.genfavicon.com — весь процесс создания иконки включает в себя три шага:
- Выбираем файл (JPEG, GIF, PNG) на компьютере или просто прописываем URL картинки и жмем “Загрузить изображение“;
- Выбираем размер (16×16, 32×32, 48×48, 64×64 или 128×128) и необходимую область рисунка, если хотим сгенерировать только часть изображения, нажав “Захват и Изображение“;
- Смотрим результат и, если все устраивает, скачиваем файл.
Создание анимированного favicon для сайта в онлайн генераторах
Сейчас посмотрим несколько сервисов, где можно сделать анимированные фавиконы, а также добавить текст на латинице, который будет прокручиваться вместе с иконкой в виде бегущей строки. Правда анимация поддерживается не всеми браузерами.
www.favicon.by — сервис на русском языке. Все, что требуется, выбрать файл, вписать текст на латинице (если надо) и нажать кнопку “Создать Favicon“. Ниже можно увидеть результат и скачать архив с файлами.
www.favicon.com.mx — сервис, полностью идентичный предыдущему, только на английском языке.
Где сделать фавикон с нуля — online редакторы favicon
Далее рассмотрим генераторы фавиконов с возможностью их редактирования или рисования с полного нуля.
antifavicon.com — этот сервис, почему-то с приставкой анти, интересен тем, что позволяет самому создать файл favicon.ico, но не в виде картинки, а как текст на цветном фоне. Все что требуется, это ввести подходящие буквы и выбрать цвета. Кстати, свой фавикон я сделал именно здесь. Думал потом переделаю, а теперь привык уже.
favicon-generator.org — здесь, кроме конвертера, есть еще и редактор иконок. Кроме того, можно загрузить созданный фавикон в публичную галерею, где его смогут свободно скачивать другие пользователи сайта.
favicon.ru — популярный российский онлайн-генератор, где можно, как создавать фавиконы из картинок, так и рисовать их. Так же тут можно заказать создание favicon специалистам за 20$. Интересно, кто-то там делает заказы?
www.favicon.cc — другой популярный генератор, похожий на предыдущий. Интересной особенностью этого сервиса является то, что здесь можно делать покадровую анимацию длительностью до 20 секунд.
Увидеть анимированный favicon и скачать его можно в окне предварительного просмотра.
www.degraeve.com/favicon — еще один online favicon generator. Этот редактор, как и предыдущие, позволяет сделать прозрачный фон иконки.
Пожалуй, на сегодня хватит, хотя это еще далеко не все онлайн-сервисы. Но даже этих вполне достаточно, чтобы создать красивый фавикон для своего сайта или блога и быть заметным в поисковой выдаче.
И все же, еще один онлайн-генератор иконок для сайта я приберег на потом. Этот сервис заслуживает отдельного поста, где я расскажу, как сделать favicon для iPhone, IPod Touch и IPad браузеров и подробнее остановлюсь на установке анимированных иконок на сайт. Кроме того, познакомлю Вас с сервисом Favicon Validator, где можно проверить и увидеть все значки favicon.ico, если этот файл содержит более одного изображения. Чтобы не пропустить, советую подписаться на обновления блога blogibiznes.ru. Всем пока!
Понравилась статья? Нажимай на кнопки:
А я никогда фавиконы не делал, всё время просто находил подходящие на забугорных сайтах с коллекциями фавиконов. Там их море и можно подобрать абсолютно любой. Хотя и как делать фавикон самому тоже будет не лишним знать.
Многие хотят что-то необычное, не как у всех. Вот для них такие сервисы раздолье, если в фотошопе сложно рисовать.
Это верно)
Свой первый фавикон сделал в favicongenerator.com, полезный сервис!
Положила в закладку, нужная для меня информация, попробую сделать фавикон.
Свой первый фавикон тоже делала в одном из таких сервисов, очень удобно. Потом сама уже делала с помощью фотошопа. Для новичков сервисы очень полезные!
Спасибо, Олег! Думаю ты прав, дорогой, многим будет интересна эта статья!
Надо будет попробовать сделать иконку. Спасибо за подробное описание.
Отличная статья, вы раскрыли тему полностью. Хотя свой фавикон я сделал давным давно, читал с интересом. Узнал много полезного и нового.
Здравствуйте,Олег !
Хочу лично пригласить Вас поучаствовать в интересном марафоне для блоггеров «Видео-привет моим читателям».
Цель марафона приблизить себя к своим читателям и повысить доверие.
Надеюсь на ваш отклик
Спасибо, Влад, за приглашение! Не уверен, что поучаствую, никогда перед камерой не выступал. Хотя кто его знает…
Олег, у меня фавикон прописан кодом в файле. Проблема, которую не знаю как решить, заключается в том, что фавикон виден только на главной странице, его индексирует яндекс. На остальных страницах его нет. Не подскажите в чем причина и как исправить?
Людмила, для начала исправьте ошибку в имени домена в коде. В одной строке все верно, в другой ошибка в одной букве. Потом проверьте, может все наладится.
Олег! Зашла в админку, файл заголовок, исправила прямо там, но осталось все также. Наверное, еще что-то нужно править?
Зайдите сюда https://blogibiznes.ru/kak-ustanovit-favicon-na-sayt-wordpress.html и посмотрите, как выглядит код перед закрывающей скобкой. У Вас там пробел и слеш, попробуйте их убрать. Что-то не так. Потому что по ссылке в коде, должна открываться страничка с картинкой, а у Вас начинается загрузка файла.
Полезный сервис, а с такой подробной инструкцией сделать фавикон не составит труда.
Олег! Все сделала,скопировала и вставила код нижний с Вашей страницы, тоже не помогло. Не знаю-как докопаться до истины. На хостинге файл находится в папке publish.
Корневая папка может называться на разных хостингах по разному, но файл должен быть там, где находится robots.txt.
Спасибо за интересные сервисы. А то фавикон на личном блоге мне делали в рамках блога, а вот на двух других моих сайтах, которые я делала сама, фавиконов еще нету. Теперь буду знать, как даже чайник может его сделать.
Проще всего просто конвертировать какую-то картинку, например, логотипа сайта.
Классная полная статья, даже мне кое-где луч света пробил!
Очень удобная фича с кучей настроек, а главное очень быстро.
Хорошая статья, достаточно много вариантов по созданию фавикона. Спасибо.