Универсальный способ создания фавиконов. Универсальный способ создания фавиконов Программа для создания фавикона онлайн

Тема сегодняшней статьи - как сделать 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! ” и скачали созданную иконку.

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 , если этот файл содержит более одного изображения.. Всем пока!

Favicon (англ. Favorite Icon) - это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

favicon – товарный знак Вашего сайта. У многих компаний на сегодняшний день есть отличительный favicon значок, который выделяет их среди конкурентов. Чтобы иконка лучше запоминалась пользователями, компаниям следует отображать в ней свой логотип, который также должен быть одним из эллементов шапки сайта. Ещё одна положительная особенность использования favicon в том, что при просмотре большого количества сайтов в браузере, Вы не видите заголовка страниц полностью, а видите только иконку и вы сразу с легкостью можете определить ту вкладку, куда Вы хотели перейти.

Что лучше изобразить на фавикон?

Иконка должна соответствовать тематике сайта.
бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

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

Как получить favicon с сайта

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

]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) { $link_tag = $out; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) { $favicon = trim($out); if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/"); } } ?>

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

Кроме этого, Яндекс может сделать Вам "спрайт" из иконок разных сайтов:

Иконки для iPhone и iPad

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57x57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

Как динамически менять favicon?

Если Вы попробуете поменять значение свойства тега через DOM, то Вы не пролучите желаемый результат. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так: // Ссылка на файл новой иконки var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Найти и удалить старую иконку из тега HEAD var links = head.getElementsByTagName("link"); for (var i = 0; i < links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

#2b5797

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

Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:

легко и быстро создавать новые материалы;
придать существующим наработкам завершенный вид;
сохранять результат в разных форматах (SVG, ICO & PNG);
создавать иконки для .

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

IconsFlow

IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:

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

Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.

Вид векторного редактора IconsFlow:

Примеры работ:

FlatIcons

С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:

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

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

Launcher Icon Generator

Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

Начните с выбора картинки из галереи, потом определите цвет, форму заднего фона (круг или квадрат), длину тени, насыщенность, затухание – и ваша иконка готова. Все предельно просто. Для персонального использования сайт полностью бесплатный.

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.

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

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

Почему фавикон важен?

Фавикон выполняет следующие функции:

Брендинг.

Идентификация сайта пользователем (удобство использования).

Придает сайту профессиональный вид.

Остановимся более детально на основных преимуществах использования фавикон.

Узнаваемость бренда

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

Доверие

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

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Теперь предположим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

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

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

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

Для этого следуйте пошаговой инструкции:

Шаг 5. Создайте фавикон

Теперь, когда у вас есть логотип, нажмите «Создать фавикон с этим логотипом» на странице логотипа.

Шаг 6. Выберите необходимый дизайн фавикона

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

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

Найти вдохновения для фавиконки можно на сайтах:

Шаг 7. Скачайте фавикон

Вы можете приобрести фавикон отдельно, по цене 9.99$ или купить Дизайн-пакет, который включает в себя не только фавикон, но и логотип, визитную карточку, конверт и фирменный бланк. Как купить Дизайн-пакет, вы можете узнать .

После оплаты вы можете скачать фавикон в форматах ico и png.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

На сайте;

Мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;

Программах и приложениях для РC/Mac.

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

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

Шаг 1. Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla . Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать .

Шаг 2. Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Код можно скопировать на странице фавикона на сайте Logaster.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

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

Favicon - (от англ. FAVorites ICON в переводе «значок для избранного») - значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

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

У Яндекса есть специальный бот, который индивидуально индексирует фавикон всех сайтов. Периодичность добавления новых иконок в поиск составляет примерно от двух недель до одного месяца.

Куда загрузить фавикон чтобы он был онлайн?

Для отображения созданного Вами favicon.ico в виде значка сайта необходимо загрузить его в корневой каталог сайта (либо в любой каталог) и указать в коде шаблона сайта абсолютный или относительный путь к нему (), пример кода:

Зачем указывать путь к Фавикону?

При использовании одного значка сайта на всем сайте, если favicon.ico находится в корневой папке, путь к нему можно не указывать — браузеры сами его найдут и выведут в виде значка сайта. Большие или уникальные ресурсы используют разные значки сайта к каждой из своих категорий. Для этого в соответствующих шаблонах у них прописан путь к разным favicon.ico.