Создать иконку онлайн 16х16: Иконки для сайта, favicon ICO у нас сделать легко!

Иконки для сайта, favicon ICO у нас сделать легко!

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator
поможет создать иконку ico или favicon онлайн

Что такое иконка – прекрасно известно не только любому владельцу или разработчику
сайта, но и обычному компьютерному пользователю. В какой бы программе вы не работали,
будь то специализированное приложение или обычный Word – вы везде можете увидеть
множество иконок, отображающих создание нового документа, удаление, сохранение и
прочие действия. Да что там! Взять даже обычный рабочий стол ПК – у каждого здесь
найдется пара иконок «Мой компьютер», «Мои документы», «Корзина» и т.д.

В Microsoft Windows для хранения иконок используется формат ICO.
ICO-файл содержит в себе один или несколько значков, для каждого из которых отдельно
задается цветность и размер. Как правило, можно задать любой размер, но чаще всего
используются иконки ICO 16х16, 32х32, 48х48 пикселов. Структура иконки ICO близка
к формату BMP, но имеет одно отличие – наличие дополнительного изображения-маски,
которая накладывается на задний план для прозрачности рисунка.

В общем, иконки ICO мы видим повсюду. Но у многих пользователей возникает резонный
вопрос: зачем эти значки нужны? Что такое favicon.ico? Какой программой воспользоваться
для создания иконки для сайта в формате ICO? Итак, обо всем – по порядку.

Для чего нужны иконки ICO?

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

• 
  Простота распознавания. Создать иконки для сайта ICO 16х16 или
  48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях.
  Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями
  и иконками, стали плохо видны (для людей с плохим зрением это представить несложно).
  И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически
  все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с
  легкостью делать в программе нужные действия благодаря привычным значкам.
• 
  Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый
  такой значок в отличие от надписи обладает своими собственными характеристиками
  – формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно
  ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного
  взгляда.
• 
  Запоминаемость. Экспериментально доказано, что картинки запоминаются
  лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные
  ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться
  программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете
  создать значок, который настолько запомнится вашему пользователю, что в дальнейшем
  будет ассоциироваться у него только с вашим сайтом.
• 
  Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать
  на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку»
  — размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил
  название favicon.ico и позволил выделить определенный сайт из множества конкурентов.
  Но подробнее об этом – в следующем пункте.

Особенности и значение favicon.ico

Favicon (сокращение от FAVorites ICON – «значок для избранного»)
– иконка для сайта. Решив создать иконку favicon.ico для сайта, получившийся значок
будет отображаться не только перед URL страницы в адресной строке, но и рядом с
закладкой, во вкладках, в выдаче поисковика и прочих местах.

Традиционно посредством программы для создания favicon.ico получаются значки 16х16
пикселей, которые загружаются в корневой каталог сайта. Тем не менее, существует
возможность прописать в коде страницы точное положение иконки для сайта favicon.ico,
что позволяет использовать для каждой страницы свой значок.

Решив создать favicon.ico, иконки для сайта, вы получаете возможность придать вашему
ресурсу индивидуальность, сделать его более узнаваемым и популярным. Но
как
сделать иконку favicon.ico для сайта?
Какую прогу использовать, чтобы
конвертировать BMP, PNG в иконку ICO онлайн?

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок
для сайта и рабочего стола

Чтобы конвертировать BMP, PNG в ICO онлайн , требуется
специальная
программа
для создания иконок для сайта. При этом, хочется найти приложение,
которое поможет перевести изображение в иконку ICO 16х16, 32х32 не только быстро
и качественно, но еще и бесплатно.
Наша программа Icon Generator (Генератор)
станет для вас идеальным решением!

Пользоваться нашей программой для создания иконки для сайта,
favicon. ico легко и просто. Все что от вас требуется, чтобы конвертировать
BMP, PNG в ICO онлайн – выполнить несколько простых действий:

• 
  выберите на компьютере нужное изображение;
• 
  загрузите его в нашу программу;
• 
  нажмите «Создать ICO».

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

Если вы хотите постоянно пользоваться нашей бесплатной программой для создания иконок
для сайта в формате ICO – просто зарегистрируйтесь
на нашем сайте!

Вы сможете продолжить свою работу, даже если при предыдущем посещении вам пришлось
прервать создание favicon.ico. А лучшие ваши работы вы всегда сможете найти и скачать
в галерее ICO на нашем сайте.

опыт Райффайзенбанка — Дизайн на vc.ru

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

7148

просмотров

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

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

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

Подготовка

Один из важнейших этапов проекта по переработке иконок – подготовительная работа, и если провести ее правильно, дальше все пойдёт гладко.

Первая встреча с рабочей группой

Рабочая группа

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

Сбор и описание метафор

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

Рабочий файл

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

• Категория – позволяет отфильтровать и посмотреть иконки только в заданной категории, а также дает понимание агентству, в какую категорию складывать иконки в Figma.
• Описание – поясняет дизайнерам из агентства, в каком контексте используется иконка.
• Имя файла – желательно, чтобы у всех иконок наименование было в едином формате. Мы выбрали простой стиль написания kebab-case: слова пишутся строчными буквами, а для разделения используется дефис. Имя файла в рабочем документе должно совпадать с именем файла в Figma. Дополнительно можно следовать строгим правилам наименования, например, исходить только из контекста использования иконки или только из значения метафоры. У нас получился симбиоз двух этих подходов.
• Наименования команд (Raiffeisen-Online (RO), Web-site. ..) – в этот раздел мы складывали иконки из разных команд для сравнения. Колонка Current Pack – для существующего набора. Метафора согласована, не согласована – отображает для агентства финальную метафору. Важно, что определяется только метафора, а не способ отрисовки.
• 16×16 / 24×24 – показывает нужные нам размеры иконок. Здесь же цветом отмечали готовность иконки со стороны агентства и проставляли дату выполнения.

Tips&Trics: Рабочий документ на подготовительном этапе можно собирать где удобно: в Google Docs, в iCloud. Главное, чтобы все могли туда добавлять иконки из своих проектов.

Бриф для агентства

Чем больше информации в брифе, тем лучше. Поделюсь примером структуры нашего.

Количество иконок

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

Принципы построения

Принципы

В нашем случае они максимально простые: все квадраты, прямоугольники и круги рисуются по заданной сетке; толщина линий равна 2 px; углы скругляются, но окончания остаются острыми – мягкие и острые формы рифмуются с логотипом.

Tips&Trics: Иконки должны быть максимально простыми, хорошо считываться, желательно, чтобы они не были сложносоставными, содержали не более двух объектов внутри и не несли двойного смысла. Не стоит пытаться вложить в иконку все содержание и смысл метафоры, иначе будет каша, и никто не сможет уловить смысл.

Сетка

При построении иконок используется сетка и определяются основные размеры, допустимые к использованию. Мы используем два размера, основной – 24х24, дополнительный – 16х16. В размере 16х16 всего несколько иконок, в основном это стрелки, галочки и другие простые формы из категорий Actions и Navigation.

Основные размеры

Tips&Trics: Не нужно абсолютно все пытаться впихнуть в сетку, иначе в определенных группах у разных иконок будет неправильная развесовка, когда одна иконка кажется меньше или, наоборот, больше другой. У нас были исключения, но они составляли всего 10-15 % проекта.

Технические требования (чек-лист)

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

Категоризация

Чтобы на выходе мы получили набор иконок, с которым будет быстро и удобно работать дизайнерам и разработчикам, необходимо заранее распределить все элементы по категориям. Если использовать поиск Figma, это значительно облегчит навигацию по объемному проекту и ускорит работу. В нашем случае это была хорошая возможность актуализировать наш список категорий. Так, появилась категория Actions, основная для иконок, которые чаще всего используются в интерфейсах; а стаканчик кофе, наконец, переместился из категории Sport в категорию Food and Restaurants.

Описание процесса

Лучше с самого начала определить удобный процесс работы с агентством. Мы двигались итерациями по 20-30 иконок. Для ускорения работы мы сделали под иконки отдельный файл в Figma, куда дали доступ дизайнерам из агентства. Каждый фрейм – отдельная категория. Под иконками проставили теги, чтобы было понятно, что это за иконка и в каком контексте она может использоваться.

Файл с иконками в Фигма

Tips&Trics: Теги или описание метафоры под каждой иконкой в Figma лучше проставлять сразу, в процессе. Я этого не сделал, и потом мне пришлось потратить досадно много времени на тегирование 570 элементов.

Процесс создания

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

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

Для нашего креативного агентства, которое в основном специализируется на решениях с активным внедрением иллюстраций, этот заказ стал уникальным! Объем по началу пугал, но мы не подавали вида, а со временем уже привыкли и воспитали в себе новый для нас режим работы над проектом. И тут я должен сказать, что в этом очень сильно помогла вся подготовительная работа, которую проделали все участники проекта со стороны заказчика – такой скрупулезности в постановке задачи я ещё не встречал ни на одном из проектов, коих было не мало.

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

Дмитрий

продюсер проекта, креативное агентство «Вьюга»

Tips&Trics: В самом начале проекта нужно набраться терпения, так как дизайнерам-отрисовщикам из агентства нужно время, чтобы прочувствовать правила и принципы, описанные в гайдах. Будьте готовы к ошибкам: у нас в начале их было около 50% в каждой итерации, а затем количество несоответствий сократилось до 20-10%.

В чате с рабочей группой, состоящей из дизайнеров разных команд банка, мы в свободной форме обсуждали каждую итерацию. Я как менеджер проекта со стороны банка оценивал комментарии дизайнеров по чек-листу из брифа. Например, комментарий типа «что-то не то с иконкой» переводил в формат «не подходит стилистически» или «отрисована не по сетке, не по гайдам» и тд.

Переписка в рабочем чате с дизайнерами

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

Ольга Струзберг

старший UX-дизайнер, Райффайзенбанк

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

Файл с обратной связью для каждой итерации в Notion

Tips&Trics: Коммуникаций в процессе не должно быть слишком много. После отрисовки всех иконок я решил еще раз критически посмотреть на них с дизайнерами банка, и сделал созвоны раз в неделю. Каждую из 500 (!) иконок мы могли обсуждать минут 20, и очень скоро я осознал, что если мы будем продолжать в том же духе, проект затянется на несколько месяцев. Чтобы сэкономить время, я решил сам экспертно оценить результат, а локальные проблемы с каждой иконкой решать отдельно уже после релиза.

Внедрение

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

Конечно, самый главный вопрос – это процесс обновления. Есть два варианта: разом обновить текущий набор или дать новому и старому набору какое-то время «пожить» вместе, пока все не перейдут на новый. В первом случае все иконки в проектах заменятся автоматически после коммита, при этом есть риск, что в процессе слетят, например, цвета, а на нас сваливается дополнительная работа – нужно вручную заменить более 500 текущих иконок на новые. Во втором случае можно отделаться малой кровью – каждый дизайнер у себя в проекте подключает новый файл и заменяет иконки новыми версиями, так же вручную, но только свою часть и постепенно.

В итоге выбрали второй вариант, где мы оставляем текущий набор как в коде, так и в дизайне, даем какое-то время на миграцию, а потом архивируем его.

Описание процесса создания и изменения иконки

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

Сводный файл для разработчиков

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

Сводная таблица в Фигма

Tips&Trics: Для быстрого поиска иконки на портале дизайн-системы в сводной таблице необходимо указать теги.

Не все прошло гладко с передачей иконок в разработку. Оказалось, что можно было значительно упростить работу как минимум разработчикам. Мне понравилась идея, которую предложила фронтенд-разработчик команды дизайн-системы: мы не собираем таблицу соответствия, а создаем папку, где будет лежать новая и старая иконка, таким образом, чтобы у старой или новой иконки был специфический префикс, например, «new». В ту же папку кладем конфиг, в котором описываем текущее название и категорию иконки, новое название и категорию, а также теги, которые будут помогать с поиском иконки на сайте дизайн-системы.

Файловая структура вместо таблицы

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

Но мы не стали так делать, так как уже была проделана большая работа по сборке таблиц в Figma. Ситуация еще усугубилась тем, что таблицы в Figma были сверстаны при помощи автолейаута и не было возможности скопировать содержимое каждой колонки отдельно, что также могло упростить процесс передачи для разработки. Чтобы не пересобирать таблицу в другом редакторе, пришлось поискать плагин, который смог выгрузить содержимое колонок из Figma в текстовом виде. Обошлись такой небольшой оптимизацией, чтобы хоть как-то упростить работу разработчикам.

«Чтобы иконки корректно заехали в нашу библиотеку на фронте, мы начали составлять таблицу соответствия в Figma. Когда значительная часть работы уже была проделана, встретились с фронтенд-разработчиками по конкретной реализации, и оказалось, что табличка в Figma не очень подходит для выгрузки в код. Для корректного обновления ребята предложили написать скрипт, который мог бы помочь свести иконки и их названия, но так как мы уже потратили несколько недель на сборку сводных таблиц по каждой категории, решили выгрузить их в текстовом виде в отдельный файл, а в следующий раз попробовать скрипт. 😅 Мы сделали выводы и в очередной раз отметили необходимость синхронизации на каждом из этапов»

Виктория Дубровская

руководитель направления по развитию платформ разработки Core Foundation Mobile and Frontend

Внедрение через дизайн-систему

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

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

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

Как изменить иконку (favicon) для сайта?

Как изменить иконку (favicon) для сайта?

В инструкции рассмотрены следующие вопросы:

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

Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:

Вот где можно увидеть такую иконку:

• Закладки и вкладки браузера
• Результаты поиска Яндекс, Google
• Каталоги и рейтинги, которые загружают favicon сайтов
• Панель задач и рабочий стол операционной системы

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

Где взять иконку для сайта?

По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

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

При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.

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

Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (корень — это то, что вы видите первым при входе в файловый менеджер не переходя в другие директории):

Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.

Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.

Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">

В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />

Как изменить иконку (favicon) для сайта?

Создать Favicon

Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.

Создать фавикон

Для создания favicon необходимо:

1. Выберите размер вашего фавикона
2. Выберите файл и нажмите Создать Favicon
3. Сохраните полученный Favicon на свой компьютер

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

1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
   • rel — тип ресурса: icon или icon shortcut
   • href — адрес файла
   • type — тип передаваемых данных. Зависит от формата файла.
     • image/x-icon — для формата ICO;
     • image/gif — для формата GIF;
     • image/jpeg — для формата JPEG;
     • image/png — для формата PNG;
     • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

Требования Яндекса к фавиконке

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

• Размер: 16×16, 32×32, 120×120 пикселей.
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Требования Google к фавиконке

• Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
• Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
• Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

Отображение фавиконки

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

Что такое фавикон сайта (favicon), зачем нужен и как сделать

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

Вы знаете, что вам нужен фавикон, но не уверены, что это такое? Или, может быть, прекрасно осведомлены, что такое фавикон и зачем он нужен, но не в курсе, как и каким его сделать?

А что, если вы даже не уверены, что оно вам надо, но вроде “так говорят”, и вроде “у всех есть”?..

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

Содержание статьи:

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

Начнём, конечно, с азов. Если вы знаете, что такое фавикон (favicon, фавиконка, favicon-ка (да, и такое написание встречается)), смело пропускайте этот раздел.

В марте 2020 года фавикону исполняется 21 год, он становится совсем взрослым… Впервые он появился в 1999-м году вместе с выпуском пятой версии известного (и на тот момент самого популярного) браузера Internet Explorer.

Само слово #favicon — это сокращение от “favorite icon”, что значит “иконка избранного”. Исторически такое название вполне оправдано, так как изначально фавикон сайта показывался только при добавлении этого сайта в “избранное” пользователя. Сейчас же фавикон отображается на вкладке любого сайта (при его наличии) почти во всех современных браузерах, и даже в поисковой выдаче, например, в Яндексе и  с недавнего времени в Гугле. Это хоть и основные, но далеко не единственные места обитания современных фавиконов!

Они везде:

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

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

Но перейдем к следующим разделам, а то уже обо всём по чуть-чуть рассказал…

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

Фавикон повышает узнаваемость сайта и бренда

Фавикон — это такой же элемент фирменного стиля и айдентики, как логотип, фирменные цвета, фирменные узоры. О важности единства фирменного стиля я уже говорил в этой статье.

По хорошему фавикону сразу становится ясно, что за сайт за ним скрывается (конечно, если вы уже знакомы этим с сайтом).

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

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

Увеличивает кликабельность

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

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

Посмотрите на эти примеры:

Во втором случае кому-то может показаться, что информация с сайта 2GIS — это продолжение “пункта” о Яндекс.Еде.

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

Вызывает доверие

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

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

Каким должен быть фавикон

Правильный фавикон должен:

1. Быть хорошо различимым в малом размере.
2. Соответствовать фирменному стилю компании.
3. Отвечать современным техническим требованиям: размеры и форматы файлов.

Чуть подробнее об этих правилах.

Визуальная составляющая фавикона

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

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

Но, во-первых, это не всегда так, а, во-вторых, 16 пикселей — это просто крайне малый размер. И иконка сайта — это буквально единственное место, где вам потребуется логотип такого размера.

Что это значит: далеко не любой логотип можно качественно уменьшить до такого размера, даже не каждый “хороший”.

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

1. Взять из основной версии логотипа только какой-то фрагмент:

Желательно, чтобы этот фрагмент был наиболее узнаваемым.

2. Значительно упростить графический знак логотипа:

Мелкие детали могут “замусорить” фавикон.

3. Изменить пропорции элементов знака:

Тонкие линии основного логотипа не будут видны в крохотном фавиконе.

4. Сделать совсем новый значок:

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

Технические требования к современным фавиконам

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

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

Формат ico морально устарел. Его главным преимуществом перед другими форматами (например, тем же png) было в том, что один файл содержал несколько иконок разных размеров (на все случаи жизни). Но браузеры уже давно научились брать иконку нужного размера из разных файлов.

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

В современных реалиях качественный фавикон — это отдельные файлы:

• разных размеров (от 16х16 до 512х512 px),
• разных форматов (png, svg, ico),

подходящие под все браузеры (Chrome, Firefox, Safari, Internet Explorer и др.) и операционные системы (Android, iOS, Windows, MacOS).

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

Более того некоторые системы, например, браузер Safari, не поддерживает формат ico, и для отображения фавиконов ему нужен векторный формат svg.

Но и ico пока что не стоит списывать со счетов — есть работа специально для него. Устаревшие браузеры, например, Internet Explorer версии 10 и ниже (а ими всё ещё пользуется большая часть населения) поддерживает только этот формат. Также ico-файл пригодится для того, чтобы у сайта была персональная иконка в Windows при сохранении его на рабочий стол или в панель задач.

Чтобы не писать полотно текста, состоящее из повторяющихся слов и цифр, покажу наглядно набор favicon-иконок, необходимый вам для сайта, подходящий для 99,9% случаев (вдруг уже есть какие-то новые стартапы, использующие что-то совсем другое):

Страшно? Мне тоже… 

Но, к счастью, есть специализированные сервисы, которые значительно упрощают подготовку всех этих файлов!

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

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

Например, с моим лого (монограмма LA в кружочке) машина справилась вполне сносно. Даже в размере 16х16 px он выглядит неплохо (а лучше уже не получится).

Я просто закинул векторный файл в формате svg в сервис Real Favicon Generator и на его основе машина подготовила мне весь комплект иконок, что на картинке выше. Правда, пришлось ещё самому добавить 2 не самых популярных размера (64х64 и 128х128 px) в файл ico и сделать дополнительные версии без кружка (они выделены на скриншоте выше). Последние нужны для плиточных систем в Windows.

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

Теперь чуть подробнее о той самой доработке и для чего она нужна.

В разработке дизайна иконок и других элементов интерфейса есть понятие #пиксель-пёрфект (pixel perfect). Это значит, что каждая линия и точка должны быть выровнены по пикселям насколько это возможно, чтобы изображение не замыливалось и не мутнело. В дизайне вообще (как и во многих других сферах) есть негласное правило: если можно сделать лучше — значит, так и надо сделать.

Посмотрите, пожалуйста, на этот рисунок:

Перед вами несколько вариантов, как можно нарисовать синий квадратик в иконке размером 16 на 16 пикселей.

а) квадрат ровно 14х14 пикселей в ширину и в высоту, толщина его стенки ровно 1 пиксель, выровнен по центру иконки;

б) квадрат ровно 14х14 px, толщина его стенки равна 1,5 px, выровнен по центру иконки;

в) квадрат ровно 15х15 px, толщина его стенки — 1 пиксель, смещён вверх и влево от центра иконки;

г) квадрат ровно 15х15 px, толщина стенки равна 1 пикселю, выровнен по центру иконки.

Видите разницу? Если бы наша иконка была намного больше (100, 200 и больше пикселей) и квадратики тоже пропорционально бы выросли, разница между ними была бы минимальна, но в таком малом размере непопадание точно в пиксели может быть значительным и сказаться на чёткости фавикона.

Вернёмся к одному из примеров:

В этом случае выравнивание шарика по pixel-perfect было бы невозможно и даже ошибочно — он стал бы слишком угловатым и топорным.

Но в примере ниже для более чёткого изображение выравнивание по пикселям было необходимо:

Пример создания фавикона из логотипа

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

Дан логотип:

На его основе нужно создать фавикон.

Загружаем его в сервис Real Favicon Generator, нажимаем кнопку, получаем кучу файлов в нужных форматах и размерах. Смотрим на фавиконы маленьких размеров (16, 32 и 48 пикселей) и немножко расстраиваемся:

В первом размере даже “ЕЛЗ” читается с трудом, не говоря уже о “FOREST”. В других ситуация получше, но всё равно всё размыто. Другие размеры получились нормально.

Работаем руками и головой в графическом редакторе с этими тремя размерами и получаем:

Лучше? (если смотрите с телефона, то, возможно, всё будет не так хорошо, как на самом деле, — картинки в статье могли сжаться, но настоящие фавиконы так делать не станут и будут выглядеть чётко…))

Всё дело в том, что изначальный логотип не попадал чётко в пиксельную сетку, поэтому пришлось его редактировать. Да, в двух самых малых размера фавикон лишился подписи “FOREST”, но зачем она, если всё равно её никто не сможет прочитать?

Вот, как бы выглядели все эти иконки, будь они одного размера (для наглядности добавлена пиксельная сетка):

Верхние иконки — просто уменьшенные версии логотипа. Как видно, мало какие линии проходят по границам пикселей, от чего в малом размере и появляется “замыленность”.

В общем, мой вам совет: для экономии времени и средств загрузите ваш лого (или какую-то его часть, хорошо вписывающуюся в квадрат) в сервис Real Favicon Generator и скачайте то, что он вам предложит. Если результат вас устроит, поздравляю — фавикон для сайта готов! При этом желательно, чтобы ваш лого был или в векторном формате svg или в png большого размера (хотя бы 512х512px). С последним результат хуже, но незначительно.

Если фавиконки маленьких размеров окажутся недостаточно качественными, мутными и размытыми, придётся доработать их в ручную. Вы можете сделать это сами в графических редакторах (Photoshop, Illustrator или их бесплатных аналогах Gimp и Inkscape), следуя советам из данной статьи, или обратиться к дизайнеру за доработкой фавикона.

Другие онлайн сервисы по подготовки фавиконов для сайта я не советую, так как вышеупомянутый всё равно самый лучший, и минусов у него практически нет. Но для создания чёткой иконки 16х16 px, можете воспользоваться сервисом www.favicon.cc — в этом плане он весьма хорош и полезен, но больше ни на что не годится.

Если остались какие-то вопросы по созданию фавиконов, отпишитесь в комментариях!

Буду благодарен, если поделитесь записью в соцсетях  

Как сделать файл фавикон. Что такое favicon

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

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

Как сделать иконку для сайта

Сделать фавикон можно как используя стандартные возможности Photoshop (или другого графического редактора), так и с помощью всевозможных веб-сервисов.

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон — воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

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

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico
. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами
строчку:

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

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение.ico, но и.png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon
нужно написать apple-touch-icon-precomposed
.

18 Октябрь, 2011 13 Январь, 2017

Новый урок в стиле воркшоп и на этот раз мы постигаем секреты фавикона. Favicon

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

необходим. Наиболее выгодно, конечно, он смотрится среди закладок, на фоне блеклого списка адресов без всякой графической идентификации. Однако наш урок не столько про то, как прикрепить favicon в строку браузера, сколько про то — как нарисовать свой собственный favicon в программе Фотошоп.

Все зависит от браузера. Для Microsoft Explorer
подходит формат иконки ICO
. C этим форматом мы уже сталкивались, когда делали курсор. Для остальных браузеров от Google Chrome
до Apple Safari
подойдет обычный GIF
или PNG
. Favicon
может быть полупрозрачным. Для этого его нужно сохранить в полупрозрачный PNG
, а далее преобразовать в формат ICO
. Сделать это можно в неплохой программе IcoFX .
Однако для генерации фавикона существует масса сторонних сайтов и самый очевидный из их www.favicon.ru

Как быть уверенным в том что favicon
сработает? Нужно соблюсти 4 условия.

• Фаил должен называться — favicon
  .
• Размер фавикона 16
  на 16 px
  
• Оптимальное место для фавикона — корневая папка сайта.
• Адрес иконки прописать в мета-тегах heder-а
  в индексе сайта.

В HTML выражении это выглядит так:

Можно создать несколько иконок для разных браузеров, например одну в формате ICO
, а другую в PNG
и все это указать через тег link

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

Создать favicon
очень просто. Хотите сделать такой же favicon
как у Вконтакте или Однокласников? Хороший favicon
не сделать, уменьшая большие картинки во всяких «генераторах» фавиконов, которых полным полно в интернете. Фавикон очень маленький. Фактически мы это своего рода пиксель-арт
, который имеет свои особенности. Нельзя написать букву и просто уменьшить её до 16px

.

Подобный favicon
будет размыт и нечеток, так как края буквы при изменении размера будут заходить на несколько пикселей. Получится своего рода anti-alias
, который обычно является добром, но в случае с пиксель-арт подобные переходы как раз не нужны. С другой стороны стоит избегать и излишней «ободранности» на округлостях иначе получится привет гифки 1999 год.

Создайте фаил размером 16

х 16px

. Мы создадим очень простой полупрозрачный favicon
с в виде буквы, с толикой глубины. Глубина будет создана за счет тени и градиента.

Почему в заставке этого урока вы видите огромный гладкий и вылизанный favicon
? Потому что я его увеличил для заставки к уроку. Как у меня вышло качественно увеличить изображение 16px
? Очень просто, я всегда работаю в векторе, если его возможно использовать и если в этом есть смысл. А вектор легко переносит любую трансформацию и не теряет в качестве.

Выберите инструмент Rounded Rectangle Tool
. На панели настроек выберите режим , что позволит рисовать в векторе. В выпадающем меню панели галочка — Snap To Pixels
. Это необходимо для того, чтобы векторные контуры привязывались к пикселям и не рисовали «между» ними.

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

Применим для поверхности faviconа
. Подробнее о стилях можно почитать в статье . На панели слоев выберите нашу форму и выберите Layer > Layer Styles > Gradient Overlay
В появившемся окне кликните по градиенткой полоске. Это вызовет Окно настройки градиента. Задайте градиент с цветами 0059c6
и 0085d1
. Нажмите ОК
. Остальные параметры на картинке ниже.

Буква «Н», которая изображена на фавиконе сайте слишком проста, чтобы впутывать в это дело шрифты, поэтому я просто нарисовал её инструментом Rectangle Tool
. Но давайте сделаем нечто посложнее. Выберите инструмент Type Tool
и поставьте любую буквы. Для нашего урока лучше всего подойдет буква без округлостей. Я выбрал шрифт и поставил букву H
.

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

Сделайте вот что. На панели настроек шрифта отключите режимы растрирования — none

. Теперь шрифт Edit > Free Transform
Немного растяните его. Отлично.

Если в вашем случае получилась ерунда, а оно может произойти в случае с режимом растрирования none, так как отсутствие сглаживания порой искажает шрифт при маленьких размерах, сделайте вот что. Переведите букву в кривые Layer > Type > Convent to Layer Shape
Воспользуйтесь инструментом Direct Selection Tool
.

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

Надеюсь вы уловили смысл работы. Конечно нет никакого смысла тратить столько времени если ваша буква — две палочки и крестик. Но в случае буквы «В»
или «D»
эту работу стоит проделать с её ровными сторонами. Мы практически приблизились к созданию favicon-а.

Конец близок, осталось добавить стили для нарисованной буквы. На панели слоев выберите слой с буквой и зайдите в Layer > Layer Styles > Drop Shadow
Мне нужна легкая тень с Opasity 50%

и очень четкими краями Distance 1, Spread 0, Size 2

Чтобы сохранить полупрозрачный фавикон откройте File > Save for Web & Devices
В появившемся диалоговом окне выберите PNG-24
и галочку на Transparensy
. Это сделает наш фавикон полупрозначным. Осталось поместить иконку на сайт вышеперечисленными способами, или преобразовать её в формат ICO
. Favicon создан.

К сожалению плагин, который открывал ссылку на скачку только после нажатия Like
сломался. Теперь фаилы можно скачать без всяких «Понравилось». Однако если вам понравилась статья не скупитесь на Like
. Так же подписывайтесь на канал, добавляйтесь в группу

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

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

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

Что такое фавикон и для чего он необходим?

Прежде, чем приступить к конкретным практическим действиям, надо все же до конца выяснить степень необходимости установки фавикона и ту роль, которую он выполняет. Вообще, слово favicon происходит от от слияния двух английских слов: fav
orite (любимый, избранный) и icon
(иконка, иллюстрация, символ).

Что же такое фавикон и в чем его преимущество? Это небольшая картинка размером 16 на 16 пикселей
, которая появляется рядом с вашего ресурса после загрузки соответствующего графического файла с расширением ico в корневую директорию сайта (подробности установки ждут вас ниже по тексту этой публикации).

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

Другим важным плюсом наличия изображения favicon будет его появление на странице результатов поисковой выдачи (серпа) Яндекса. Это очень удобно юзерам, которые ищут для себя нужную информацию.

Они могут выбирать веб-страницы для перехода не только с помощью предоставленных тайтлов и , но и по значку выделить нужный сайт из ряда других (который, возможно, понравился ранее из-за высокого качества контента):

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

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

Ведь при условии качественного содержания посетители будут не просто возвращаться на этот ресурс, но и своими действиями увеличивать и другие ПФ. Именно favicon изначально поспособствует в этом.

Так что наличие фавиконки выгодно как юзерам, так и вебмастерам. За это можно выразить глубочайший респект «зеркалу рунета», выдача которого в этом смысле выгодно отличается от серпа Гугла, который выглядит слишком аскетичным.

Кстати, у Яндекса даже имеется специальный бот, который занимается индексированием иконок сайта. Так что даже после установки фавикона он не сразу может появится. Придется подождать очередного апдейта (неделю, иногда чуть больше), чтобы он отобразился на странице поиска. Иконку своего сайта в закромах «зеркала рунета» можно найти по совершенно конкретному адресу. Моя, например, находится здесь:

Http://favicon.yandex.net/favicon/сайт

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

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

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

Как сделать favicon для сайта в online generator и бесплатно скачать коллекции иконок

Теперь перейдем непосредственно к практическим действиям. Для примера предложу вам сервис Favicon.cc
(подобные сайты именуются генераторами), где можно сформировать весьма приличный мини-логотип, даже если вы не обладаете какими-то особыми навыками.

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

Все эти возможности воплощены в находящемся на главной странице блоке кнопок, который расположен в левой части:

Для создания эксклюзивной иконки воспользуемся кнопочкой «Create New Favicon»
и нарисуем картинку сами. В плане достижения ее уникальности это самый оптимальный вариант, поскольку в этом случае риск повторить чей-нибудь вариант будет наименьшим.

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

В правой части конструктора под надписью «Color Picker»
даны инструменты для создания иконки. Вертикальный спектр дает возможность выбрать цвет кликом по нужной его части, а палитра слева от него — оттенок этого цвета. После выбора цвета водите по пиксельной сетке курсором, который примет форму карандаша, и закрашивайте необходимые участки.

Если передвинуть горизонтальный ползунок «Transparency»
вправо-влево, добьемся изменения прозрачности пиксела. Показатель 0% дает полностью непрозрачный фон, 100% — наоборот, прозрачный. В процессе рисования поставьте галочку напротив «transparent»
при желании полностью удалить не понравившийся цвет с изображения в том или ином месте:

А теперь попробуем настроить полупрозрачный фон необходимых нам участков или всего рисунка в целом, сдвинув ползунок «Transparency» на отметку «50%»:

При нежелании каждый раз возвращаться к палитре для выбора оттенка отметьте опцию «pick existing color»
, после которого курсор примет форму пипетки, с помощью которой можно копировать цвет уже закрашенных областей:

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

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

Что еще мне нравиться в этом сервисе, так это то, что одновременно с манипуляциями на «холсте» на вкладке открытой в браузере вебстраницы Favicon.cc, а также в разделе предварительного просмотра «Preview»
, который находится чуть ниже, появляется изображение будущей фавиконки в реальном размере, которое меняется в такт всем действиям:

После того, как ваша работа будет закончена, жмете кнопку «Download Favicon»
для загрузки полученного изображения на свой компьютер, которое сохраняется в нужном формате favicon.ico.

Далее продемонстрирую, как сделать фавикон в данном online генераторе из уже существующей картинки. Для этого воспользуйтесь кнопочкой «Import Image»
в упомянутом уже блоке, после чего выбираете графический файлик на жестком диске ПК и загружаете его на сервис («Upload»):

Здесь следует обратить внимание на то, что поддерживаются графические файлы в форматах jpg, jpeg, gif, png, bmp, ico, cur. Это уже можно считать широким выбором. Максимальный размер загружаемого файла не должен превышать 5 Мб, что более, чем достаточно.

Также имейте ввиду, что для сохранения пропорций изображения (которое не является квадратным, где ширина и высота равны) оставляете включенной опцию «Keep demensions»
.

Ежели примените «Shrink to square icon»
;, то иконка примет форму квадрата, но будет деформирована по одной из сторон, что, по моему мнению в стандартном варианте не является лучшим решением. Впрочем, в каждом конкретном случае могут быть свои предпочтения. После загрузки картинки она займет свое место в редакторе генератора Favicon.cc:

Далее вы можете отредактировать ее как вашей душе угодно, используя описанные выше инструменты. Хочу отметить следующее. Я специально взял для примера изображение с расширением jpg, которое, как известно, не поддерживает прозрачный фон. Обратите внимание, что и в редакторском окошке фоновые пикселы непрозрачные (белого цвета).

Казалось бы, какая разница? Но посмотрим, как будет выглядеть подобный значок на фоне, отличном от белого (например, неактивные вкладки браузера Google Chrome серого цвета):

Согласитесь, белый фон все портит. Но все это поправимо. Для того, чтобы пикселы вокруг рисунка сделать прозрачными, используем для коррекции инструмент «transparent» и с помощью «ластика» настраиваем прозрачность:

После выполнения этих действий фавиконка на серой вкладке браузера становится гораздо более симпатичной:

Не рассмотренным остался один инструмент. Это опция «move»
которая позволяет при необходимости переместить всю картинку на нужное расстояние (вправо-влево, вверх-вниз):

Ну и после завершения своих творческих изысканий скачиваете полученный файл favicon.iso на компьютер. Вот примерно так вы можете создавать иконки для своего сайта в генераторе.

Делаем анимированный фавикон в онлайн генераторе

Рассказывая о сервисе Favicon.cc, я не сказал еще об одной опции, которую он предоставляет, а именно о возможности создать анимированную иконку. Прежде, чем продолжить, хотелось бы вас предупредить, что анимация будет работать не во всех браузерах. Так что решайте сами, нужно это вам или нет. Я, например, считаю это излишеством, но, как говорится, на вкус и на цвет…

Если вы решили, что подобная favicon-ка будет для вашего сайта полезной, то нажимайте на опцию «Use Animation»
в самом низу окна редактора. Чтобы сделать просто моргающую иконку, достаточно щелкнуть по «Append New Frame», создав пустой фрейм (без изображения) и выбрать из выпадающего меню желаемую периодичность (на скриншоте 1 сек.):

Чтобы анимация просматривалась в предпросмотре ниже, отметьте чекбокс «animate preview». Для данного примера фавиконка будет моргать с периодичностью в одну секунду. Исчезать она будет потому, что второй фрейм, как я уже отметил, будет пустым:

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

С этой целью надо просто скопировать исходное изображение, кликнув по кнопочке «Copy Previous Frame»
и средствами генератора изменить некоторым образом цветовую гамму. Для образца в дополнение к исходнику я соорудил нечто вроде рамочки:

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

Кроме скорости чередования кадров можно настроить также количество повторений (итераций)
. К слову, «loop forever» означает «бесконечный цикл»:

Ежели в процессе творческой работы вам что-то не понравилось, то опции «Clear Frame»
и «Delete Frame»
позволят соответственно полностью очистить или удалить ненужный фрейм.

Список онлайн генераторов и галерей с коллекциями фавиконов

Чтобы дать вам возможность выбора, предлагаю взглянуть на другие сервисы, как российские, так и зарубежные, где также можно создавать favicon-ки для своего ресурса. Начнем с online генераторов рунета:

• Favicon.ru — почти полный аналог очень подробно описанного мною выше онлайн сервиса Favicon.cc, поэтому создавать здесь значок будет проще простого, тем более, что интерфейс полностью на русском. Единственный недостаток Фавикон.ру, если его можно считать таковым — отсутствие возможности генерировать анимированную иконку; — генерирует значок на основе загруженного изображения формата png, jpg или gif. Здесь вы можете добавить созданную иконку в публичную галерею;
• DeGraeve — этот сервис позволяет сделать фавиконку как на основе готовой картинки, так и самостоятельно, используя свои художественные навыки;
• Iconj — генерация favicon.ico из загруженной картинки;
• FaviconGenerator — сервис с простой опцией преобразования изображения с расширением png, jpg, jpeg или gif в графический файл формата ico;
• DynamicDrive — поддерживаются графические форматы gif, jpg, png и bmp, максимальный размер файла 150 kB.

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

Если эксклюзивность иконки вас не напрягает, (а может, вы нуждаетесь сразу в нескольких картинках для ряда своих проектов), то в сети можно насобирать их целую гору. Благо существуют специальные галереи с коллекциями бесплатных иконок

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

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

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

Прежде всего, необходимо подсоединиться к серверу хостинга по протоколу ФТП при помощи той же программы Файлзилла ( вся информация об этом незаменимом менеджере для вебмастеров) и загрузить favicon.ico с компьютера в корневую папку сайта:

Если будете копировать, не забудьте заменить «http://сайт» на URL вашего сайта. Эти строчки необходимо разместить в любом месте между . А вот куда их прописать, зависит как раз от движка, который вы используете.

Если ваш веб-сайт работает на WordPress
, то нужно открыть папку с текущей темой WP ( все о файловой структуре шаблонов и их роли), найти там файл header.php
, который отвечает за вывод служебной информации, и вставить туда эти строчки (лучше для этой цели использовать еще один Notepad plus plus):

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

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

Возможно, кто-то желает знать, как поставить себе анимированный фавикон
. Здесь действия по своей сути не отличаются от описанных для обычной иконки. Картинка с анимацией должна иметь расширение gif, тогда строчки, помещенные в содержание тега head, будут такими:

Но надо иметь ввиду, что анимация работает не во всех браузерах (на данный момент только в ), хотя, возможно, в будущем положение изменится. В остальных обозревателях, как, впрочем, и в поиске Yandex, иконка будет статичной.

После того, как вы произвели подключение фавиконки, самое время проверить, появился ли значок на вкладке браузера. Лучше, если проверка будет проведена во всех продвинутых веб-обозревателях: Opera ( о том, как скачать бесплатно новейшую версию, установить и настроить Оперу), IE (а — все об Интернет Эксплорере), Мазиле и Хроме.

Ежели иконка не присутствует на своем законном месте, возможно, придется , так как вполне вероятно, что вы получили устаревший вариант вебстраницы. Ну а если мини-логотип не отображается в поиске Яндекса, сразу бить тревогу не стоит. Как я уже сказал, необходимо время для того, чтобы робот «зеркала рунета» проиндексировал его.

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

Если вы неоднократно задавались вопросом, что такое favicon, то сегодня вы узнаете о нем все, но прежде следует обобщить понятие значка (иконки), используемое в компьютерной терминологии.

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.

Назначение favicon

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

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

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

Так как фавикон – это пиксельный графический файл, то и создать его можно таким же образом, как и обычное изображение в формате ico. Сделать фавиконы можно следующими способами:

• конвертировать из изображения практически любого формата через специальное приложение;
• скачать готовую пиктограмму;
• нарисовать с нуля в графическом редакторе или воспользоваться онлайн-генератором.

Разберемся с каждым способом подробнее.

Галереи готовых значков

Интернет пестрит различными ресурсами, в том числе и узкоспециализированными. Одними из таких сайтов являются ресурсы, хранящие и постоянно пополняющие коллекцию созданных пользователями (а порой и роботами) иконок. Любая такая галерея позволяет быстро выбрать и загрузить на компьютер или прямо на сайт понравившееся изображение.

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

1. www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на сайте ICON J

1. – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

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

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

Добавление favicon способно не только сделать сайт красивее, но и повысить количество его посетителей. А как это сделать, вы уже знаете!

Буду признателен за каждый лайк.

1 голос

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

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

Незаметный элемент, который откладывается в подсознании каждого

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

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

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

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

Расскажу историю о том, как иконка для сайта сыграла со мной злую шутку. Мне было нужно скачать какую-то книгу. Увидел я знакомый фавикон, дизайн тоже я видел не в первый раз. Отлично, я тут уже был! Нажал на скачивание практически не задумываясь. Не успел сохранить, как антивирусник заверещал диким криком, а комп было уже не спасти, пришлось переустанавливать систему. Только в этот момент я вспомнил откуда я знаю этот сайт и хорошо его помню. Точно такая же ситуация случилась около года назад, на этом же ресурсе.

Как создать фавикон всего за 2 минуты

Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.

Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут http://www.icoconverter.com/

. Выберите файл.

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

Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.

Итак, казалось бы, все. Однако, у меня вылезает ошибка. Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.

Можно сжать и или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».

Теперь выберите «Маленькие».

Скачайте то же самое фото, но меньшего размера.

Конвертируем снова.

Где искать готовые иконки

Более простой и честный способ обрести иконку скачать ее с онлайн сервиса http://www.iconsearch.ru/

. Использование этих картинок разрешено администрацией и не преследуется по закону. . Введите любое название в поисковую строчку и готово.

Находите изображение в формате png и ico, скачивайте и устанавливаете на сайт.

Но что делать, если хочется создать своими руками? В этом нет ничего сложного.

Творческая работа для профессионалов и рвущимся в специалисты

Любое дело – это хорошо. Круто, если вы тянетесь к новым знаниям и готовы делать всякие мелкие штучки, чтобы развивать свои способности. Если у вас есть желание самому придумать что-то интересное для портала, то вам понадобится бесплатный сервис: http://favicon.ru/

.

Выбираете цвет.

Рисуем в предложенном для этого поле.

Параллельно следите за результатом. Затем скачиваете и готово.

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

И ваша картинка превратится в 8-битный фавикон. Воспользуйтесь прозрачностью, чтобы избавиться от фона.

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

Я бы с большим удовольствие использовал для этой работы фотошоп (). Создал бы иконку, сохранил ее в png, а затем конвертировал при помощи http://www.icoconverter.com

. Да, работы значительно больше, зато результат будет интереснее и красивее. Хотя, выбирать вам.

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

Если вам понравился этот ролик и вы хотите более углубленно изучить фотошоп, то порекомендую вам курс Зинаиды Лукьяненко (Фотошоп с нуля в видеоформате VIP 3.0

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

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

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

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

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

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

Удачи вам в ваших начинаниях. До новых встреч.

Создаем favicon для сайта | Вебмастеру

Сегодня вопрос о том, как сделать favicon для сайта является одним из самых популярных среди начинающих блоггеров и владельцев сайтов. Фавикон – очень важный элемент любого дизайна. Он представляет собой небольшое квадратное изображение с размерами 16х16 пикселей, которое используется для закладок в различных Интернет-браузерах. Таким образом, несмотря на свои маленькие размеры, он выполняет очень важную роль.

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

Кроме того фавикон используется в качестве логотипа для торговой компании.

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

Выглядит фавикон в поисковой выдаче так:

Online сервисы и готовые коллекции favicon

Узнав, что такое favicon для сайта и зачем он нужен, необходимо понять то, как же его можно сделать?

Можно воспользоваться несколькими способами:

• скачать уже готовое мини-изображение из специальной галереи;
• создать самостоятельно при помощи генератора фавикон;
• сделать иконку из готового изображения при помощи favicon generator’а.

Скачать уже готовое мини-изображение из специальной галереи можно на следующих сайтах: thefavicongallery.com; iconj.com; favicon.co.uk или favicon-generator.org. На данных ресурсах представлено огромное количество различных иконок, поэтому каждый сможет найти ту, которая подойдет ему больше всего.

Если вы не смогли найти ничего подходящего, что маловероятно, то можно сделать favicon на сайт с нуля самостоятельно. Следует отметить, что созданные вами изображения смотрятся на проекте значительно лучше. Для этой цели созданы специальные Favicon Generators, которые позволяют нам создавать красивые мини-картинки в режиме реального времени.

«favicon.cc» является одним из самых популярных и простых сервисов, который позволяет быстро справиться с поставленной задачей. С его помощью у вас есть возможность нарисовать самостоятельно каждый пиксель вашей будущей фавиконки. Всего их насчитывается 256.

После перехода на сервис у вас откроется рабочее окно, где вы и будете экспериментировать:

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

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

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

На данном ресурсе вы можете создавать множество различных favicon в режиме реального времени.

Это один из многих онлайн-генераторов, который находится в свободном доступе. Существует также множество других. Вот некоторые из них: amichurin.appspot.com; favicon-generator.org/editor. Принцип их работы аналогичен приведенному примеру.

Установка favicon на сайт

Создав мини-иконку, остается только ответить на вопрос о том, как установить favicon на сайт?

Прежде всего, нужно проверить формат изображения. Он должен быть только «.ico».

Для этого достаточно вставить ваш файл в «корень» сайта или блога. Как правило, папка называется «DOCUMENT ROOT». После выполнения этих действий пауки и браузеры самостоятельно определят новую информацию о том, что появился новый файл favicon.ico.

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

Онлайн-генератор значков

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

Что такое Favicon?

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

Существует множество бесплатных программ для создания изображений значков, но большинство из них не поддерживает.ico файл. Следовательно, вам придется загрузить дополнительный плагин. После того, как вы закончите создание значка, его необходимо изменить размер, так как значки должны быть размером 16 x 16 или 32 x 32 пикселя.
Пример значка: Google, Yahoo, Bing, Pinterest (см. Изображение ниже).

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

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

1. 1.Генератор Favicon

Этот бесплатный онлайн-инструмент поможет вам преобразовать логотип, изображение и файл фотографии в стандартный формат значков * .ICO. Простые шаги: загрузите файл изображения, сгенерируйте файл значка и загрузите его. Для достижения наилучших результатов вы можете использовать для загрузки квадратное изображение. А если вам нужен прозрачный значок, используйте файл GIF или PNG с прозрачным фоном. (пример инструмента для создания значков изображений)

1. 2. Favicon Creator

   Создайте фавикон.ico для вашего веб-сайта мгновенно с помощью нашего онлайн-инструмента рисования значков (Draw, Pixel Color, Eraser, Reset Editor) и загрузите его бесплатно.Создайте формат файла значка веб-сайта из файла изображения и фотографии. Это очень полезный онлайн-инструмент для каждого веб-дизайнера, разработчика и блогера. Это просто и быстро. (Пример инструмента для создания значков изображений)

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

Как добавить значок на свой сайт:

• Создайте свой значок на этом веб-сайте.
• Поместите файл favicon.ico в корневую папку своего веб-сайта
• Напишите следующий код в свой html:
  rel = "ярлык" href = "/ favicon.ico" type = "image / x-icon">

• Посетите www.yourwebsite.com/favicon.ico , чтобы убедиться, что ваш значок там.

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

Online Icon Maker — создавайте свои собственные значки в бесплатном онлайн-редакторе.

Создание онлайн-иконок для избранных

Как пользоваться:

• Выберите один из основных цветов, щелкнув цветной квадрат в правой части окна.
• Удалите пиксели, рисуя прозрачным цветом (шахматная доска), или сотрите весь холст, нажав кнопку «Очистить холст» на панели инструментов.
• Выберите собственный цвет, введя его шестнадцатеричный код веб-цвета в поле под цветами по умолчанию и нажмите кнопку «Установить».
• Выберите инструмент рисования, нажав кнопку на панели инструментов:
  • «Карандаш» меняет цвета пикселей, когда мышь перемещается по холсту при нажатой левой кнопке.
  • «Линии» рисует линию от точки, где была нажата кнопка мыши, до точки, в которой она была отпущена.
  • «Пипетка» позволяет установить текущий цвет от пикселя иконки.
• Создайте значок favicon из изображения jpg или png, используя поле под окном редактора. (Альфа-канал не поддерживается.)
• Загрузите новый значок, просто нажав кнопку «Загрузить значок» на панели инструментов.

Дополнительные ресурсы

Узнайте, как изменить свои веб-страницы для отображения значков.

Загрузите значки из библиотеки значков.

Загрузите RealWorld Icon Editor для создания профессиональных иконок.

Важно: Для этого онлайн-конструктора значков требуется веб-браузер с поддержкой Javascript 1.2 , например Internet Explorer 6, Firefox или Opera. Если у вас возникли проблемы, убедитесь, что вы используете один из поддерживаемых браузеров и включен Javascript («Активный контент»).

Только авторизованные пользователи могут оставлять комментарии на этой странице.

Лучший генератор фавиконов — Favic-o-Matic

Lazy preset для ленивых

в том числе следующих размеров:

• 16×16 + 32×32 пикселей (несколько .ico + .png)
• 144×144 пикселей
• 152×152 пикселей

Obsessive пресет для одержимых людей

в том числе следующих размеров:

• 16×16 + 32×32 пикселей (несколько .ico + .png)
• 57×57 пикселей
• 72×72 пикселей
• 114×114 пикселей
• 120×120 пикселей
• 144×144 пикселей
• 152×152 пикселей

Апокалипсис сейчас

в том числе следующих размеров:

Предупреждение: косая черта в конце не найдена!

Это может вызвать проблемы с путями, будьте осторожны!

Почему абсолютные пути?

Для некоторых версий Firefox требуются абсолютные пути.Поскольку все браузеры поддерживают их, это самый простой выбор.
Вы также можете использовать произвольный код.
например:

Цвет фона значка плитки Metro в IE 10 (эквивалент значка apple-touch-icon в метро)

Заголовок плитки Metro (при желании можно оставить поле пустым)

RSS-канал

Metro tile (при желании можно оставить пустым)

Стандарт интернета для (почти) каждого браузера

Интерфейс браузера закрепленного сайта IE9

Страница новой вкладки в IE, кнопка панели задач в Win 7+, боковая панель списка чтения Safari

Значок сенсорного экрана iPhone (без сетчатки — iOS7)

Значок сайта Windows, боковая панель списка чтения Safari в HiDPI / Retina

Стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G)

Победа 8.1 изображение плитки метро (маленькое)

Значок iPad Touch (без Retina — iOS6 или более ранней версии)

Значок iPad Touch (без сетчатки — iOS7)

Сенсорный значок Retina на iPhone (iOS6 или более ранняя версия)

Сенсорный значок Retina на iPhone (iOS7)

Значок приложения Интернет-магазина Chrome и значок Android (низкое разрешение)

Плитка IE10 Metro для закрепленного сайта и сетчатки iPad (iOS6 или более ранней версии)

Победа 8.1 изображение плитки метро (квадрат)

Значок сенсорного экрана Retina на iPad (iOS7)

Изображение плитки метро Win 8.1 (широкое)

Изображение плитки метро Win 8.1 (большое)

Как создать и использовать собственные значки?

Пошаговое руководство, показывающее, как создавать собственные значки и прикреплять их к своим плейлистам «Сделать свои собственные»

Создавайте свои собственные карты

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

Использование пользовательских значков

Что еще круче, чем выбирать значки из нашего скучного старого списка, так это создавать и использовать свои собственные значки! Есть несколько способов создать свои собственные значки, и все они подробно показаны ниже. Но какой бы способ вы ни выбрали, все они затем загружаются одинаково, поэтому давайте начнем с этого, с нескольких простых шагов, которые нужно выполнять во всех случаях:

1.При создании или редактировании списка воспроизведения в библиотеке MYO коснитесь изображения значка рядом с дорожкой (брокколи в случае ниже!)

2. Коснитесь заголовка Мои значки вверху, а затем значка ЗАГРУЗИТЬ ЗНАЧОК кнопка внизу

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

4. Выберите любое изображение и подтвердите нажатием ГОТОВО или ОТКРЫТЬ или ДОБАВИТЬ (в зависимости от того, какое устройство вы используете)

5.Изображение будет загружено в раздел Мои значки , и вы можете нажать на него, чтобы выбрать его для этого трека

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

Ниже приведены несколько конкретных советов по пяти различным способам создания отличных иконок для Yoto Player!

1.Найти иконки онлайн

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

Вот несколько советов, которым нужно следовать:

• Размер: Yoto Player имеет дисплей 16×16 пикселей, поэтому для достижения наилучших результатов используйте значок этого размера.
• Форматы: все, кроме .ico в основном.Итак, png / gif / jpg / tif / svg все хорошо
• Темные пиксели: Черные или очень темные пиксели не будут отображаться на дисплее Yoto Player как ничего, вы увидите только цвет внешней поверхности проигрывателя, так что что-то вроде пары черных солнцезащитных очков в виде значка вероятно, в реальной жизни выглядят как едва узнаваемая капля.

Некоторые ссылки на сторонние сайты, где вы можете найти значки 16×16:

Фавикон.io

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

2. Создавайте иконки из ваших фотографий (ЛЕГКАЯ ВЕРСИЯ)

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

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

3. Создавайте иконки из ваших фотографий (ПРО ВЕРСИЯ)

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

Наши советы:

• Лучшее приложение, которое мы нашли для этого, — 8Bit Painter (ссылка для iOS UK и iOS US, и ссылка для Android).
• Сделайте несколько фотографий и представьте, как они будут выглядеть в разрешении 16×16. Вам нужно будет делать снимки с высококонтрастными цветами и яркими графическими композициями.
• Используя 8Bit Painter , создайте новый значок размером 16×16
• Импортируйте фотографию, которую вы хотите использовать, обрезая изображение, чтобы создать именно ту композицию, которую вы хотите.
• Измените любые части изображения, чтобы они лучше смотрелись в Yoto Player, используя функции рисования вручную. Помните, что черных пикселей будут отображаться как ничто , поэтому вы можете использовать черный цвет для создания областей прозрачности в конечном значке на дисплее
• Экспортируйте готовый значок (при желании вы можете сохранить его размером более 16×16, поскольку Yoto будет уменьшать масштаб больших изображений при их загрузке) на свой телефон или ПК, готовый для загрузки в вашу библиотеку пользовательских значков, используя пронумерованные инструкции выше.

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

Лично мне больше всего нравится делать значки для этой статьи поддержки, так как он может вовлекать детей и заставлять их рисовать и творить!

Есть много способов сделать это, но я это делаю так:

• Возьмите миллиметровую бумагу и разметьте квадрат 16×16
• Нарисуйте значки с детьми
• Сделайте фото готового снимка на свой телефон
• Используйте приложение 8Bit Painter (см. Ссылки выше), чтобы импортировать эту фотографию, используя шаги (3) выше

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

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

PixilArt — хорошее приложение для создания значков таким образом, и у них есть мобильное приложение, а также приложение для ПК (ссылки здесь). А вот демонстрация с использованием PixilArt :

.

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

Как настроить значки приложений для прогрессивных веб-приложений

Обновление

SVG-значки наконец становятся более поддерживаемыми, и это позволяет создавать небольшие, динамические и бесконечно масштабируемые значки для вашего веб-приложения. Проверьте текущую поддержку!

Слишком долго; Не читал:

Значки приложений важны. Поддерживаются как минимум следующие размеры:

• 16×16.png
• 32×32.png
• 48×48.png
• 128×128.png
• 150×150.png
• 180×180.png
• 192×192.png
• 512×512.png
• favicon.ico (встроенный 16×16, 32×32, 48×48)

Почему значки приложений важны?

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

Моя личная настройка значка приложения

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

• safari-pinned-tab.svg
• mstile-150×150.png
• favicon-48×48.png
• favicon-32×32.png
• favicon-16×16.png
• apple-touch-icon.png (180×180)
• android-chrome-512×512.png
• android-chrome-192×192.png

Автоматизация?

Существует множество инструментов, которые создают для вас значки / значки приложений. (Я настоятельно рекомендую Real Favicon Generator), , но , возможно, вы хотите создать некоторые активы вручную . Я особенно говорю о наших меньших по размеру друзьях в нашем наборе иконок; Значки размером 16 x 16, 32 x 32 и 48 x 48 пикселей.

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

Значок 16×16, уменьшенный прямо по сравнению с его версией 180×180. Моя попытка сделать тот же значок «идеальным в пикселях».

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

Оптимизация и сжатие

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

Лично мне нравится использовать ImageAlpha и ImageOptim для сжатия изображений. Просмотрите их там и увидите, что размер файла значительно уменьшился.

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

Что касается нечетного вывода, нашего SVG, мы можем сжать его, используя SVGO через CLI или SVGOMG через GUI .

.ico generation

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

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

К счастью для пользователей Mac, вы можете легко сделать это из интерфейса командной строки с 1 крошечной (и чрезвычайно мощной) зависимостью! Вот, пожалуйста:

Эта зависимость — ImageMagick, уважаемое имя в этой сцене. Он не только позволяет создавать файлы .ico, но также позволяет конвертировать изображения в различные форматы файлов, такие как WebP .

Рекомендую установить ImageMagick через Brew;

brew install imagemagick

После этого мы можем создать наш favicon

convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

Эта команда берет ваши значки 16×16, 32×32 и 48×48 и инкапсулирует их в ICO-файл. Таким образом вы позволяете браузеру решать, какой значок лучше всего отображать в зависимости от устройства и среды пользователя.

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

Imagemagick для создания favicon.ico с размерами 16×16 и 32×32 в нем · GitHub

Imagemagick для создания favicon.ico с размерами 16×16 и 32×32 в нем · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Imagemagick для создания favicon.ico с размерами 16×16 и 32×32 в нем

Вы не можете выполнить это действие в настоящее время.

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

Favicon.ico Generator — Как создать хорошую иконку.

Как создать хорошую иконку с помощью онлайн-генератора фавиконов?

Давайте на время сменим основную тему статьи с технологий на маркетинг. Как и в случае с дизайном логотипа, создание значка — это первый шаг, которому вы должны следовать, чтобы ваш бренд узнал. В фавиконе 16×16.ico canvas вы можете отображать логотип компании (обработанный пикселями), первую букву названия компании, красивое изображение и так далее. Главное, чтобы иконка выглядела профессионально и чисто. С помощью любого из онлайн-генераторов фавиконов процесс создания будет простым и интересным.

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

• WordPress favicon — используйте первую заглавную букву W.
• Drupal favicon — используйте иллюстративный значок капли воды, который является частью логотипа бренда.
• Joomla favicon — используйте знак логотипа, означает «все вместе».

В Интернете бесконечное количество значков для значков. Вы также можете просмотреть наш раздел «Последние новости», чтобы проверить бесплатные значки для значков и вдохновить их. Интернет — мощная и эффективная платформа для создания собственного бренда.

При использовании генератора значков favicon обратите внимание на:

• Цвет — выберите цветовую палитру вашего логотипа и вашего бренда, чтобы фавикон гармонично смотрелся с вашим сайтом.
• Персонаж — если у вашего бренда есть персонаж, рекомендуется использовать его на значке. Создайте маленькую версию персонажа 16×16, неважно сглаженную или пиксельную.
• Emotion — используйте эмоции, такие как улыбка, смех, грусть, круто, хихиканье, скучно и т. Д.
• Фигуры — используйте разные формы, играя с нашим генератором значков, чтобы ваш значок выглядел как треугольник, квадрат, круг и т. Д.
• Уникальность — будьте уникальны и креативны, чтобы выделиться среди конкурентов.

Вы можете использовать генератор иконок Faviconer. Этот инструмент разработан для бесплатного использования, и мы будем рады, если он поможет вашему бизнесу.

.