Сделать фавикон онлайн 16х16: Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

Сделать 🖼 Favicon для сайта

Как пользоваться сервисом для создания favicon?

1. Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
2. Нажмите «Создать Favicon»;
3. Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

Как установить отдельные фавиконы для мобильных устройств

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

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

1. Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
2. Добавьте ссылку на размещенный файл в HTML-код главной:

   
   <link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

Иконки 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 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 на нашем сайте.

Иконка для сайта или как сделать Favicon ico самостоятельно

Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Когда мы набираем в командной строке браузера адрес какого-нибудь сайта, с левой стороны в момент загрузки страницы появляется маленькое изображение в виде иконки. Иконка для сайта – Favicon, (сокращение от английского слова FAVorites ICON) переводится как «значок для избранного».

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

И если вы обращали внимание, при выдаче результатов поиска в поисковике Яндекса на странице перед заголовками найденных страниц присутствует Favicon (иконка сайта).

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

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

Если изменения не произошли, и вы не видите свой новый favicon в строке перед адресом сайта, попробуйте для начала очистить кэш браузера. Также может быть, что для размещения иконки в вашем сайте есть специальная папка, туда и надо поместить favicon ico. Все зависит от движка, на котором сделан сайт. В моем случае (сайт на Joomla) favicon находится по адресу /templates/папка с шаблоном сайта/favicon.ico.

На сайтах, сделанных, на других движках, путь к иконке может быть другой. К примеру, если вы решили создать свой блог на Blogstop.com, и хотите сменить иконку (а прямого доступа к папкам в blogger нет), достаточно зайти на blogger в панель управления блогом → Дизайн → Элементы страницы. В верхней левой части окна – Значок → Изменить и загружаете свою новую иконку. Все очень просто.

В дальнейшем, когда робот Яндекса посетит ваш сайт, и найдет ваш favicon ico,он разместит его у себя на сервисе. И если после размещения вашего favicon ico на сервисе Яндекса посмотреть на ваш сайт на странице поисковой выдачи, можно будет увидеть иконку вашего сайта. Но произойдет такое не сразу. Визит Яшиного робота может затянутся до месяца.

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

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

Вас это может заинтересовать:

Как сделать файл фавикон. Что такое 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 ). Буквально за несколько недель вы овладеете всеми навыками, которые нужны для работы с этой программой.

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

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

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

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

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

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

как создать и добавить иконку сайта • SA1NIKOV.RU

Автор Сергей Сальников На чтение 13 мин Опубликовано 05.05.2021

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

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

Favicon – расшифровывается как Favorite Icon (“значок для избранного”). Он был придуман еще в прошлом веке. В марте 1999 года, браузер Internet Explorer 5 стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за пару десятков лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим.

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

Так выглядит иконка сайта в поисковой выдаче Яндекса

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

Формат фавикона

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается. Ее можно встретить в таких форматах как GIF, JPEG, PNG и SVG. Большинство форматов поддерживаются всеми современными интернет-браузерами. Вот небольшая сравнительная таблица, для наглядности:

Браузер	ICO	PNG	GIF	JPG	SVG
Chrome	Да	Да	Да	Да	Да
Firefox	Да	Да	Да	Да	Да
Opera	Да	Да	Да	Да	Да
Edge	Да	Да	Да	Нет	Да
IE	Да	Да	Да	Нет	Нет
Safari	Да	Да	Да	Да	Да

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

Раньше фавикон можно было делать в BMP-формате, но на сегодняшний день он уже устарел и практически нигде не используется. Наверное, самые распространенные варианты – это ICO, PNG и GIF, так как поддерживают прозрачность. Хотя формат ICO тоже потихонечку устаревает. Как, впрочем, и GIF (по крайней мере для иконок). Рекомендую использовать PNG-формат, как наиболее универсальный и поддерживаемый. Некоторые умельцы делают себе анимированную GIF иконку, но анимация поддерживается только в Firefox, поэтому это практически бессмысленно.

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

Размер иконки

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

Рекомендация Яндекса по размеру и формату favicon

В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

Favicon для Android:

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Favicon для Apple:

• 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
• 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
• 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
• 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
• 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
• 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
• 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
• 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
• 180×180 – для iPhone 6 Plus c iOS версии 8.0

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

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

Онлайн-сервисы для создания фавикон

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

Скриншот сервиса favicon.by для созания фавиконки

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

• Favicon.cc – англоязычный сервис.
• Favicon.by – русскоязычный сервис.

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

Скачивание готовых фавиконок для сайта

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

Сайтов, которые предоставляют такую возможность бесплатно, достаточно много. В некоторых сервисах можно даже скачать иконки в векторном формате для последующего редактирования в Adobe Illustrator или аналогичных редакторах. Я не буду перечислять все, приведу только несколько ресурсов, где можно их скачать в PNG или SVG-форматах, которыми пользуюсь сам.

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

Отрисовка иконки в фотошопе

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

Редактирование скаченной иконки сайта в фотошопе

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

Как сохранить или конвертировать в ICO

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

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

Как установить favicon на сайт: html-код

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

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

Добавление иконки сайта в Вордпресс

Если у вас другая CMS-система, то настройки могут быть в другом месте. Однако, даже если их нет, иконку сайта можно добавить и через html-код, который нужно прописать в секцию <head>. Обычно она тоже выносится в куда-то настройки. В нее вставляются счетчики метрики, гугл аналитики, скрипты онлайн-консультантов и т.д. Туда же добавляется и html-код для фавикона. Если таких настроек нет (такое тоже может быть), то ищите файл шаблона вашей темы, который отвечает за кусок кода в <head>.

Десктопные браузеры (chrome, firefox, opera)

Вставка иконки осуществляется через тег <link>. Тег универсальный и используется не только для установки иконок. Выглядит в коде примерно так:

<head>
    ...
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    ...
</head>

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

Артибут	Описание	Возможные значения
rel	Тип ресурса	icon — учитывается большинством браузеров; shortcut icon — учитывается браузером Internet Explorer; apple-touch-icon — для браузера Safari и устройств Apple; mask-icon — маска для монохромных векторных иконок в Safari и на Touch Bar в MacBook; manifest – для устройств на Android.
href	Адрес файла	Путь до иконки. Для кириллических доменов нужно использовать Punycode-конвертер.
type	Тип передаваемых данных	image/svg+xml — для формата SVG; image/x-icon или image/vnd.microsoft.icon — для формата ICO; image/gif — для формата GIF; image/jpeg — для формата JPEG; image/png — для формата PNG; image/bmp — для формата BMP.
sizes	Высота и ширина (не обязательный)	any — любой размер; ВхШ — заданный размер.

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

Последовательность атрибутов может быть любая. Например, если необходимо прописать ICO для старых браузеров (типа IE), и PNG разных размеров для новых, то код будет выглядеть вот так:

<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico">
<link type="image/png" rel="icon" href="/favicon-16x16.png">
<link type="image/png" rel="icon" href="/favicon-32x32.png">
<link type="image/png" rel="icon" href="/favicon-96x96.png">
<link type="image/png" rel="icon" href="/favicon-120x120.png">

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

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

Браузер Safari и Apple устройства

Код практически ничем не отличается, за исключением атрибута «rel». В данном случае он должен иметь значение «apple-touch-icon». Размер иконки лучше использовать максимальный 180х180 пикселей, без прозрачного слоя. Но вы можете указать и несколько размеров иконок, как и в примере выше. Углы иконки автоматически будут скруглятся при добавлении на главный экран.

Получаем вот такой код:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Помимо этого, в Apple поддерживается и иной формат иконок – монохромная векторная иконка, окрашенная в определенный цвет (по маске). Для этого в артибут «rel» прописывают значение «icon-mask» и дополнительно прописывается новый атрибут «color», который и задает нужный цвет. В коде выглядит так:

<link rel="mask-icon" href="/safari-icon.svg" color="#5bbad5">

Иконка при этом должна быть в векторном SVG-формате.

Устройства на Android

Тут иконку также лучше использовать большую, например, 192х192 пикселя. Подключение иконки происходит также через тег <link>, однако вместо адреса иконки указывается JSON-файл (спецификация WebApp Manifest), внутри которого уже и прописываются иконки. В атрибуте «rel» присваивают значение «manifest». По итогу, должно получится что-то похожее:

<link rel="manifest" href="/webmanifest.json">

Сам файл должен иметь похожее содержание:

{
 "name": "MyApp",
 "short_name": "App",
 "description": "Application",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },
  {
   "src": "/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  },
  {
   "src": "/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }
 ]
}

Устройства Windows и браузеры Edge, IE

Дополнительно можно прописать иконки для плиток в операционной системе. Их поддерживает Windows 8 и 10 версий. Также браузеры от Microsort (IE и Edge) используют этот стандарт. Правда формат PNG поддерживается только начиная с версии IE 11. Для IE 10 версии нужно использовать ICO.

Иконки в плитках в ОС Windows 10

Установка такой иконки делается уже не через тег <link>, как было до этого. Вызов происходит следующим образом:

<meta name="msapplication-TileColor" content="#fff000">
<meta name="application-name" content="MyApp">
<meta name="msapplication-TileImage" content="/ms-tile-144x144.png">

В атрибут «name» задается имя переменной, в «content» – значение.

• msapplication-TileColor — цвет плитки;
• application-name — имя сайта;
• msapplication-TileImage — путь к иконке.

Размеры плиток определенные Microsoft:

• Маленькая — 70×70 (Рекомендуемый размер: 128×128)
• Средняя — 150×150 (Рекомендуемый размер: 270×270)
• Широкая — 310×150 (Рекомендуемый размер: 558×270)
• Большая — 310×310 (Рекомендуемый размер: 558×558)

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

Начиная с версии 8.1 можно использовать файл «browserconfig.xml». Для вызова нужно использовать следующий код:

<meta name="msapplication-config" content="/browserconfig.xml">

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

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo   src="/ms-tile-128.png"/>
      <square150x150logo src="/ms-tile-270.png"/>
      <wide310x150logo   src="/ms-tile-558x270.png"/>
      <square310x310logo src="/ms-tile-558.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

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

Создаем 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.

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

Лучший генератор фавиконов — 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 (большое)

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

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

Что такое Favicon?

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

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

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

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

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

1. 2. Favicon Creator

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

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

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

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

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

Генератор Favicon из текста — Favicon Maker

Create Favicon Online

Favicon — это небольшой ICO-файл размером 16 x 16 пикселей, представляющий логотип или первую букву определенного бренда. Это краткая форма двух слов «избранное» и «Значок», также называемых значком URL-адреса, значком вкладки, значком закладки, коротким значком или значком веб-сайта.

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

PNG в ICO : конвертируйте png в ico одним щелчком мыши в трех разных размерах 48px, 32px и 16px.

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

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

Почему Prepostseo Favicon Generator?

Prepostseo Favicon Generator — лучший инструмент для создания значка из изображения, текста и эмодзи.Это совершенно бесплатно, и вы можете мгновенно создать ваш любимый ICO-файл. Окончательное изображение, созданное нашим инструментом, совместимо со всеми браузерами.

Никакой тяжелой работы : Prepostseo Favicon Creator позволяет легко создавать значок ICO с желаемым размером, цветом и размером. Больше не нужно трудиться, чтобы создать значок для Microsoft, Android или IOS.

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

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

Мгновенный просмотр : больше никаких догадок о окончательном виде вашего значка. Prepostseo дает мгновенный предварительный просмотр значка ICO для всех платформ, таких как предварительный просмотр Android, предварительный просмотр Apple и предварительный просмотр Microsoft.Итак, теперь вы можете через секунду узнать, как выглядит ваш значок.

Что делает этот производитель значков?

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

Text to Favicon

Prepostseo Tool поддерживает более 800 шрифтов. Эта большая база данных помогает подобрать шрифт, используемый на вашем веб-сайте.

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

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

Изображение для Favicon

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

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

Зачем мне нужен файл ICO вместо JPEG или PNG?

Современные веб-браузеры, такие как Chrome, Firefox и Opera, поддерживают значки, сохраненные в формате PNG или GIF. Однако Internet Explorer поддерживает только формат значков Microsoft, также называемый файлом ICO, для отображения значка в адресной строке браузера.

Хотя Internet Explorer не поддерживает другие форматы, кроме ICO, все современные браузеры поддерживают другие форматы файлов, включая ICO.

Идентификация бренда

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

---

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

Доверие и доверие

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

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

Легко отслеживать

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

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

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

---

Преимущества Favicons

Мнения по этой теме могут отличаться. Некоторые люди считают, что это абсолютно не влияет на SEO, в то время как другие полагают, что значки имеют влияние на SEO.Более менее? Вот преимущества значка для SEO:

Повышение удобства использования сайта

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

Закладки

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

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

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

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

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

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

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

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

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

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

Настройка изображения вашего фавикона | Volusion V1 Help Center

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

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

• В адресной строке браузера

• Рядом с названием страницы на ее вкладке

• Рядом с названием страницы в списке закладок

Чтобы добавить значок в свой магазин Volusion:

1. В области администратора перейдите на страницу Design > Логотипы .

2. Разверните раздел More Logos и найдите заголовок Favicon Logo .

3. Перетащите файл изображения со своего компьютера в зону перетаскивания или щелкните Загрузить , чтобы найти изображение на вашем компьютере. Файлы изображений должны быть в формате .ICO и использовать рекомендуемый размер : — 16 x 16 пикселей.

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

Как создать значок значка

Чтобы создать значок значка, вам потребуется приложение для редактирования графики (например, Adobe Photoshop). Самая сложная часть создания значка — это создание очень маленького квадратного изображения размером 16 x 16 пикселей, которое идентифицирует или представляет ваш магазин.

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

Использование сетки 16 x 16

1. Откройте графическое приложение и создайте новую графику 16 x 16 пикселей.

2. Увеличение примерно до 1600%.

3. При необходимости выберите «пиксельную сетку» или создайте сетку с интервалом 1 x 1 пиксель.

4. Начните рисовать свой значок! Не забудьте проверить 100% масштаб, чтобы увидеть, как будет выглядеть готовая иконка.

5. Сохраните последний значок с именем «favicon.ico»

Использование сетки большего размера

1. Откройте графическое приложение и создайте, например, новую квадратную графику.64 x 64 или 128 x 128 пикселей.

2. При необходимости увеличьте масштаб.

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

4. Измените размер (или масштабируйте) изображение до 16 x 16 пикселей. Вы можете поэкспериментировать с настройками качества / интерполяции / передискретизации.

5. Сохраните последний значок с именем «favicon.ico»

Использование существующего изображения

1. Откройте изображение, которое вы хотите использовать в графическом приложении.

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

3. На этом этапе вы можете увеличить контраст или отрегулировать уровни цвета.

4. Измените размер или масштаб изображения до 16 x 16. Возможно, вам придется вернуться к предыдущему шагу и внести изменения, если изображение такого размера нечеткое или неудовлетворительное. Это будет процесс проб и ошибок, и он будет зависеть от вашей графики и вашего приложения!

5. Сохраните последний значок с именем «favicon.ico «

Примечание. Если используемая вами графическая программа не поддерживает формат .ico, вы можете либо загрузить графический конвертер, либо использовать онлайн-конвертер. Вы также можете использовать генератор значков для создания значков из существующих изображений. Пример генератора значков: https://favicon.io/.

Добавление значка в ваш магазин · Справочный центр Shopify

Эта страница была напечатана 3 августа 2021 г. Чтобы просмотреть текущую версию, посетите https: // help.shopify.com/en/manual/online-store/images/add-favicon.

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

Совет

Чтобы увидеть больше видео, посетите наш канал YouTube.

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

Вы можете использовать бесплатный веб-сайт генератора значков, чтобы создать собственный значок, или вы можете создать свой собственный. Чтобы найти генератор значков, поищите в Интернете бесплатный генератор значков .

Идеальный размер для значка — 16×16 пикселей или 32×32 пикселей. Если ваш файл значка слишком большой, он будет уменьшен до 32×32 пикселей, когда вы загрузите его в Shopify.

Добавьте значок в свой интернет-магазин

Совет

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

1. От администратора Shopify перейдите в Интернет-магазин > Темы .
2. Найдите тему, которую хотите отредактировать, и нажмите Настроить .

1. В приложении Shopify нажмите Store .
2. В разделе Каналы продаж нажмите Интернет-магазин .
3. Нажмите Управление темами .
4. Найдите тему, которую хотите отредактировать, и нажмите Настроить .
5. Нажмите Изменить .

1. В приложении Shopify нажмите Store .
2. В разделе Каналы продаж нажмите Интернет-магазин .
3. Нажмите Управление темами .
4. Найдите тему, которую хотите отредактировать, и нажмите Настроить .
5. Нажмите Изменить .

1. Нажмите Настройки темы .
2. Нажмите Favicon .
3. В области Favicon image щелкните Select image , а затем выполните одно из следующих действий:
   • Чтобы выбрать изображение, которое вы уже загрузили в админку Shopify, щелкните вкладку Library .
   • Чтобы выбрать изображение на локальном компьютере, щелкните вкладку Библиотека , а затем щелкните Загрузить .
4. Добавьте замещающий текст к изображению вашего значка:
   1. Щелкните Edit .
   2. В окне Редактировать изображение введите краткое описание изображения.
   3. Нажмите Сохранить .
5. Нажмите Сохранить .

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

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

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

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

	# IE все еще безрассудный, поэтому все еще используйте favicon.ico
	convert -resize x16 -gravity center -crop 16×16 + 0 + 0 -flatten -colors 256 input.png output-16×16.ico
	convert -resize x32 -gravity center -crop 32×32 + 0 + 0 -flatten -colors 256 input.png output-32×32.ico
	преобразовать вывод-16×16.ico вывод-32×32.ico favicon.ico
	# Затем HTML должен указать size = «XxY» как наибольший размер из-за ошибок браузера
	# Создаем яблочные
	convert -resize x152 input.png apple touch-icon-152×152.png
	convert -resize x120 input.png apple-touch-icon-120×120.png
	convert -resize x76 input.png apple-touch-icon-76×76.png
	convert -resize x60 input.png apple-touch-icon-60×60.png
	# HTML для apple
				Категории: Разное Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт