Ico иконки для сайта: Бесплатные иконки SVG, PNG, ICO или ICNS

Содержание

Page not found (404)

Toggle navigation

Packs
- Значок пакеты недавно Загрузил
- Самых популярных значок пакеты
- Эксклюзивные наборы значков

категории
- Сельское хозяйство Иконки
- Животные Иконки
- Аватар и смайлики Иконки
- Красота и мода Иконки
- Бизнес и финансы Иконки
- Мультфильм Иконки
- Кино, телевидение и фильмы Иконки
- Одежда и аксессуары Иконки
- Преступление и безопасность Иконки
- Культура, религия и фестивали Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Электронная торговля и покупки Иконки
- Электронные устройства и оборудование Иконки
- Файлы и папки Иконки
- Флаги и карты Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Gym и Fitness Иконки
- Здравоохранение и медицина Иконки
- Промышленность и инфраструктура Иконки
- Инфографика Иконки
- Дети Иконки
- люблю Иконки
- Разное Иконки
- Музыка и мультимедиа Иконки
- Сеть и связь Иконки
- Недвижимость и строительство Иконки
- Школа и образование Иконки
- Наука и технологии Иконки
- SEO и Web Иконки
- Sign и Symbol Иконки
- Социальные медиа и логотипы Иконки
- Спорт и игры Иконки
- Инструменты, строительство и оборудование Иконки
- Транспорт и транспортные средства Иконки
- Путешествия, отели и каникулы Иконки
- Пользовательский интерфейс и жесты Иконки
- Погода и сезоны Иконки

стили значков
- 3D Иконки
- Badge Иконки
- Filled outline Иконки
- Flat Иконки
- Glyph Иконки
- Handdrawn Иконки
- Long shadow Иконки
- Outline Иконки
- Photorealistic Иконки

Популярные поиски
- Instagram Иконки
- Vk Иконки
- телефон Иконки
- Папки Иконки
- деньги Иконки
- Социальные Иконки
- Facebook Иконки
- Telegram Иконки
- Viber Иконки
- корзина Иконки
- Whatsapp Иконки
- стрелка Иконки
- Youtube Иконки
- дом Иконки
- Phone Иконки
- люди Иконки
- почта Иконки
- папки Иконки
- человек Иконки
- доставка Иконки
- галочка Иконки
- папка Иконки
- музыка Иконки
- Mail Иконки
- компьютер Иконки
- вк Иконки
- Steam Иконки
- Instagram Иконки
- сайт Иконки
- фото Иконки

404 Icon by Laura Reen

Иконки для сайта, 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. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.

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

Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.

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

В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер	ICO	PNG	JPEG	SVG	GIF	APNG	GIF-анимация
Google Chrome	Да	От 4.0	От 4.0	Нет	От 4.0	Нет	Нет
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0	От 9.5	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0	От 3.0	Да
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0	Нет	Нет
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0	Нет	Нет

На текущий момент основные форматы для фавикона — это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.

Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:

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

В таблице я показала, какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем

Классические десктопные браузеры
16×16, 32×32, 48×48	PNG	Прозрачный
Браузер Safari
Вектор	SVG	Прозрачный
Мобильный браузер Opera
228×228	PNG	Сплошная заливка
Windows 8.0
144×144	PNG	Прозрачный
Windows 8.1
128×128, 270 x 270, 558×558	PNG	Прозрачный
Apple iOS
180×180	PNG	Сплошная заливка
Google Android и Chrome
192×192, 512×512	PNG	Сплошная заливка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

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

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{
«name»: «mobiForge»,
«short_name»: «mobiForge»,
«icons»: [
{
«src»: «/icon-144×144.png»,
«sizes»: «144×144»,
«type»: «image/png»
},
{
«src»: «/icon-192×192.png»,
«sizes»: «192×192»,
«type»: «image/png»
}
],
«theme_color»: «#ffffff»,
«background_color»: «#ffffff»,
«display»: «standalone»
}

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144.png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

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

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src=»/mstile-150×150.png»/>
<square310x310logo src=»/mstile-310×310.png»/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

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

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

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

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

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

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

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

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

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{
«name»: «»,
«short_name»: «»,
«icons»: [
{
«src»: «/icon-192.png»,
«sizes»: «192×192»,
«type»: «image/png»
}
],
«theme_color»: «#ffffff»,
«background_color»: «#ffffff»,
«display»: «standalone»
}

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src=»/mstile-150×150.png»/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: //mobiforge.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Иконка сайта.

Что такое иконка сайта?

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

а также в результатах поиска поисковой системы Яндекс

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

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

Как подключить иконку к своему сайту?

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

Напомню, тег <link> имеет атрибуты:

href — Путь к файлу.
rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.

shortcut icon — Определяет, что подключаемый файл является иконкой.
stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml — Файл в формате XML для описания ленты новостей.

type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

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

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

<link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»>

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=»../graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>

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

Как самостоятельно изготовить файл favicon.ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

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

Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

Ну и третий способ:

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

Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

Favicon (иконка сайта) | SEO-портал

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Favicon: отображение в элементах интерфейса браузеров, облегчающее их использование.

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

Обратите внимание на вкладки вашего браузера, в котором открыта данная страница: если их много, то на мгновение представьте их без favicon. Согласитесь, без них пользоваться вкладками стало бы явно неудобно: при большом количестве вкладок в окне браузера ориентироваться в них позволяют только иконки Favicon.

Фавиконки при большом количестве вкладок

Иконка сайта в закладках браузера

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

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

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
способствует узнаваемости сайта,
облегчает работу пользователей в браузере,
является визитной карточкой сайта в браузере,
отображается в сниппетах поисковой выдачи,
может влиять на кликабельность сниппета,
может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

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

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате PNG. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

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

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.
Яндекс.Помощь

Требования к иконке сайта

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

Для фавиконок существуют требования:

к названию файла,
к геометрическому размеру,
к формату файла,
к размещению,
к HTML-разметке.

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

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

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

Геометрический размер

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

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Как отмечалось ранее, если пиктограмма сайта будет создана не в формате ICO, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

имя файла: favicon,
формат файла: ICO,
размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

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

Привлекательность

Иконка сайта должна быть уникальной, привлекательной и запоминающейся, поэтому к её созданию необходимо подойти серьезно, с учётом всех возможностей:

Используйте уникальную фавиконку: Пользователи не любят плагиат и копирование: заимствование иконки сайта другого популярного ресурса в большинстве случаем негативно отразится на поведенческих факторах.
Фавиконка должна быть контрастной: Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.
Подумайте об использовании анимации: Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.
Учитывайте возможность применения прозрачности: Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

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

Контрастность

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

Исходное изображение

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

Статичная иконка

Анимированная иконка

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

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

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

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

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop.

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Перейти к генератору favicon.cc

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

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

отсутствие русской версии,
экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

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

кликните Create New Favicon,
в области «Color Picker» в правой части окна размещены инструменты для рисования:
- палитра цветов — для определения цвета карандаша,
- Transparency — ползунок определения степени прозрачности,
- Last Used Colors — панель быстрого выбора из последних применяемых цветов,
- transparent — устанавливает прозрачный цвет («стирка»),
- move — позволяет переместить все пиксели в редакторе.
разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
скачать готовую фавиконку можно по клику на Download Favicon.

Создание Favicon в онлайн-генераторе

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

кликните Use Animation под окном редактора,
раскроются дополнительные инструменты для работы с кадрами:
- номер кадра указан прямо под редактором Favicon,
- в выпадающем списке напротив номера можно выбрать частоту смены кадра,
- Clear Frame — очистка окна редактора (текущего кадра),
- Append New Frame — добавление нового чистого кадра (откроется в редакторе),
- Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
- Delete Frame — удаление текущего кадра,
- animate preview — активация демонстрации анимации в области «Preview»,
- в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

кликните Import Image,
выберите файл для преобразования размером не более 5 Мб,
определите способ преобразования размера изображения до квадратных пропорций:
- Keep Dimensions — с сохранением пропорций исходного изображения,
- Shrink to square icon — сжимая или растягивая изображение.
кликните Upload для конвертации.

Онлайн-конвертер favicon.cc

Готовые бесплатные фавиконки

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

чтобы перейти к списку готовых фавиконок кликните:
- Latest Favicons — последние созданные иконки,
- Top Rated Favicons — самые популярные иконки,
кликните по названию понравившейся фавиконки,
кликните:
- Download Favicon чтобы скачать копию фавиконки,
- Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

Сложный многофункциональный интерфейс
Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.
Нет возможности сохранять файлы в формате ICO
Но можно сохранять иконку в формате BMP и заменять расширение на ICO.
Нет возможности создавать анимационные Favicon в формате ICO
Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

открываем программу,
кликаем Файл → Создать,
в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
для удобства рисования:
- масштабируем изображение (клавиши CTRL + + и CTRL + -),
- включаем сетку: (клавиши CTRL + '),
- настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты…),
- используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Рисование Favicon в Photoshop

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

кликаем Файл → Сохранить как,
в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
открываем Total Commander и меняем расширение файла на ICO.

Смена формата Favicon с BMP на ICO

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

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

Создание иконки для сайта из изображения в Photoshop

откройте исходное изображение в Photoshop,
измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
- кадрирования (клавиша C),
- изменения размера изображения (клавиши ALT + CTRL + I),
- изменения размера холста (клавиши ALT + CTRL + C),
перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
- уменьшите изображение до 16×16 px,
- в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
- вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Изменение размера и настройка четкости фавиконки

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

открываем статичную фавиконку в программе,
кликаем Окно → Шкала времени,
кликаем Создать анимацию кадра,
выбираем кадры и:
- дублируем слои для новых кадров,
- редактируем слои для новых кадров,
- настраиваем отображение слоёв в кадрах,
- устанавливаем частоту смены кадров.
переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
- выбираем тип файла GIF,
- в разеле «Анимация» выбираем число повторов «Постоянно»,
- сохраняем картинку.

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

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">

Возможные значения атрибутов тега <link> для Favicon
Атрибут	Значение	Пояснение
rel	icon	Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
rel	shortcut icon
type	image/x-icon	Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата `ICO`.
	image/vnd.microsoft.icon
	image/gif	Для фавиконок в формате GIF.
	image/jpeg	Для фавиконок в формате JPEG.
	image/png	Для фавиконок в формате PNG.
	image/bmp	Для фавиконок в формате BMP.
	image/svg	Для фавиконок в формате SVG.
	image/apng	Для Favicon формата `APNG`.
href	[относительный URL]	Например: /favicon.ico
	[абсолютный URL]	Например: http://site.net/favicon.ico
	[Код base64]	Например: data:image/x-icon;base64,AAABAA…

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

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

HTML-тег для Favicon вне корневого каталога

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

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

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

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

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

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

Быстрый совет: добавление значка на ваш веб-сайт

Натан Ролер

Что такое Favicon?

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

Вот пример меню закладок:

Но это еще не все. Некоторые веб-сервисы и поисковые системы (например, DuckDuckGo) даже используют значок:

Есть ли у вашего сайта фавикон?

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

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

Favicons добавляют дополнительный блеск, который ценят посетители (и клиенты).

Технические подробности

Размер

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

Что показывать

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

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

Формат изображения

Как следует из названия, значки должны использовать формат файла значков ( .ico ).Раньше конвертировать в этот формат было сложно. Однако благодаря простым бесплатным услугам это уже не так. Все, что вам нужно сделать, это создать изображение 16×16. Формат .ico поддерживает прозрачность, поэтому вы не ограничены созданием квадратного значка. Если вы хотите воспользоваться преимуществами прозрачности, используйте при создании изображения формат .gif или .png.

Когда у вас будет изображение 16×16, воспользуйтесь бесплатным сервисом, например favicon.cc, чтобы преобразовать его. Используйте опцию «Импортировать изображение», чтобы загрузить исходное изображение:

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

Сохраните файл на своем сайте (подробнее об этом ниже).

Куда он идет

Первоначально значки должны были называться точно favicon.ico и размещаться в корне вашего домена (например, http://www.yourdomain.com/favicon.ico ). Это означало, что у вас может быть только один значок на домен, точка. Однако по мере того, как значки стали стандартизированы, появилась большая гибкость. Сейчас есть два подхода:

Один значок для всего домена

Если вам нужен только один значок для всего домена, просто сохраните значок .ico в корневую папку вашего сайта. После загрузки он должен быть доступен по адресу http://www.yourdomain.com/favicon.ico . Как только вы загрузите файл, ваш браузер должен начать отображать значок для всех страниц вашего сайта. Если нет, очистите кеш браузера и перезагрузите страницу.

Фавиконы для отдельных страниц

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

Обновите выделенный путь для ссылки на новый файл значка. Обратите внимание, что мы используем путь относительно сайта (начиная с косой черты), поэтому ссылка будет действительной независимо от пути к текущей странице.

При использовании этого подхода вы все равно захотите загрузить резервный значок на http: // www.yourdomain.com/favicon.ico для ситуаций, когда кто-то просматривает или добавляет в закладки не-HTML-контент (например, PDF-файл).

Давайте рассмотрим: как это сделать, простой способ

Создайте изображение 16×16. Если вам нужна прозрачность, используйте формат PNG или GIF.
Преобразуйте изображение в формат .ico с помощью бесплатного сервиса, такого как favicon.cc.
Загрузите новый значок на http://www.yourdomain.com/favicon.ico . Для более точного управления используйте приведенный выше код, чтобы указать значки для каждой страницы.

Заключение

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

Я надеюсь, что это руководство устранило тайну этих маленьких значков и дало вам возможность добавлять их на свои сайты!

Есть мысли или комментарии? Вы видели юмористический или креативный значок во время просмотра веб-страниц? Пожалуйста, поделитесь в комментариях!

Спасибо Дайан Д.за предложение этой статьи — она получила подарочный сертификат Amazon на 15 долларов в качестве приза.

Как изменить значок в адресной строке или Favicon.ico?

Значок « Fav Icon » или значок — это значок закладки, имеющий квадратный дизайн, напоминающий ваш веб-сайт. Эти веб-значки могут быть размером от 16×16 до 64×64. Большинство веб-дизайнеров включают изображение favicon.ico при разработке сайта.

Любая программа рисования позволяет создать значок. Поиск в Google покажет множество инструментов для создания значков.Один из популярных сайтов — http://www.favicon.cc/.

Примечание: Для дополнительных доменов поместите файл favicon.ico в каталог для дополнительного домена.

Добавление значка на ваш веб-сайт

Шаг 1. Найдите изображение

Большинство веб-сайтов используют уменьшенную версию своего логотипа или аналогичную.

Главное, чтобы ваш значок оставался простым и четким при таком небольшом размере. Большинство интерфейсов браузера (верхняя панель инструментов, содержащая кнопки браузера) могут отображать 256 цветов, но лучше всего использовать цвета Windows 16.

Шаг 2. Преобразование изображения в значок

Шаг 3. Добавление значка на ваши веб-страницы

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

Если вы хотите создать разные значки для разных страниц, просто назовите их иначе, чем favicon.ico, но с суффиксом .ico. Делайте ссылки на них на своих страницах так же, как указано выше, просто меняя расположение href для разных значков.

Шаг 4 — Тестирование вашего Icon

Откройте Internet Explorer (версии 5 или выше) и добавьте свою страницу в закладки.
Определите, выделяется ли ваш значок среди других сайтов, отмеченных закладками, с помощью значков избранного.
При необходимости отредактируйте значок и снова опубликуйте его.
Закройте браузер и снова откройте его. Еще раз сделайте закладку для своей страницы, чтобы проверить новую версию вашего значка.
Повторяйте, пока не убедитесь, что ваш значок привлекает внимание.

Общие проблемы

При просмотре в Internet Explorer мой favicon.ico не загружается.

Есть несколько решений этой проблемы:

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

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

Для получения дополнительной помощи вы можете обратиться в нашу службу поддержки в чате или по телефону по телефону 888-401-4678 . Вы также можете обратиться к статьям нашей базы знаний, чтобы получить ответы на общие вопросы и помочь вам выполнить различные действия по установке, настройке и устранению неполадок.

Руководство по FavIcon на 2020 год для почти всех и каждого браузера

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

В современных устройствах дисплеи, как правило, имеют дисплеи с высокой плотностью (сетчаткой). Эти устройства и дисплеи имеют больше пикселей на квадратный дюйм. Конечный результат — более четкий текст и изображения. Как правило, графику необходимо оптимизировать для дисплеев с высоким разрешением. Классический значок 16 x 16 пикселей на этих устройствах и дисплеях выглядит пиксельным; таким образом, необходимы дополнительные шаги. Чтобы еще больше запутать ситуацию, многие новые устройства, например iOS и Android, имеют предпочтительные замены значков.

Это практическое руководство по созданию значков для (почти) каждого мыслимого браузера.

Цель состоит в том, чтобы обеспечить наилучшие результаты (без пикселов) с наименьшим объемом работы и, что наиболее важно, при этом сохранить здравомыслие.

Изображение: NPR.org не имеет значка дисплея сетчатки, поэтому он выглядит пиксельным

Конкретные интересы? Вот что мы рассмотрим в этой статье:

Краткая история значка.ico
Полный список (в основном) всех известных любимых размеров иконок
Почему не SVG?
Проверка работоспособности: утилиты Photoshop / Automator
Чего не будут делать эти утилиты
Загрузка шаблона Photoshop / macOS Automator / Sketch
Как установить Favicon Photoshop Action
Использование экшена Photoshop
Использование автомата Action
Использование шаблона эскиза
Оптимизация
Поддержка IE6 — IE10 (и проблема Safari)
Использование IconSlate для создания значка Retina Favicon
Онлайн генератор HTML + XML

Краткая история Favicon.ico

Favicon был первоначально представлен в марте 1999 года Microsoft вместе с новой вкладкой «Избранное» в Internet Explorer 5. В номенклатуре Microsoft закладки в Internet Explorer называются «Избранное». Закладки на вкладке избранного имеют возможность включать значок избранного рядом с каждым URL-адресом. Если веб-сайт имеет файл favicon.ico, размещенный в корневом каталоге его домена, запись избранной закладки будет включать настраиваемый значок. Вскоре после этого, в 2000 году, Консорциум World Wide Web (W3C) принял значок для HTML 4.0 (с намеренно нечеткими характеристиками).

Еще в 2001 году веб-браузеры начали использовать значок рядом с URL-адресом и вскоре стали повсеместными в Интернете, перейдя на уже знакомые вкладки браузера. Позже и Firefox, и Safari добавили поддержку PNG для Favicons, что стало первым серьезным изменением в формате Favicon. В 2008 году, после выпуска первого iPhone, значок значка сделал еще один важный поворот после того, как Apple представила «apple-touch-icon.png», версию значка с более высоким разрешением, используемую для закрепления на док-станции iOS.Это создало прецедент для нескольких размеров значков и помогло закрепить PNG в качестве предпочтительного формата по сравнению с форматом файлов ICO Microsoft Windows.

W3C, признавая необходимость универсальности, в HTML5 включил стандарт для нескольких размеров значка, который получил распространение благодаря дисплеям высокой плотности, новым пользовательским интерфейсам операционной системы, изменениям в браузерах и мобильным устройствам. Сегодня у нас есть персонализированные значки для всего, от телевизоров Google до плиток Microsoft Windows Metro.

(в основном) полный список всех известных любимых размеров иконок

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

Размер	Имя	Назначение
32 × 32	favicon-32.png	Стандартный для большинства настольных браузеров
128 × 128	favicon-128.png	Значок Интернет-магазина Chrome и маленький значок на экране Windows 8 Star *
152 × 152	favicon-152.png	Значок сенсорного экрана iPad (изменение для iOS 7: вместо 144 × 144)
167 × 167	favicon-167.png	Значок сенсорного экрана Retina для iPad (изменение для iOS 10: вместо 152 × 152, не работает. IOS 10 будет использовать 152 × 152)
180 × 180	favicon-180.png	iPhone Retina
192 × 192	favicon-192.png	Рекомендация манифеста веб-приложений для разработчиков Google
196 × 196	favicon-196.png	Значок главного экрана Chrome для Android

Устаревшие значки Favicons

Размер	Имя	Назначение
57 × 57	favicon-57.png	Стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G)
76 × 76	favicon-76.png	Значок главного экрана iPad
96 × 96	favicon-96.png	Значок GoogleTV *
120 × 120	favicon-120.png	Значок сенсорного экрана Retina для iPhone (изменение для iOS 7: увеличено с 114 × 114)
144 × 144	favicon-144.png	IE10 Плитка Metro для закрепленного сайта *
195 × 195	favicon-195.png	Значок быстрого набора Opera (Не работает в Opera 15 и более поздних версиях)
228 × 228	favicon-228.png	Значок Opera Coast

На момент написания этой статьи это был полный список из 14 значков, считая изменения iOS.Теперь, когда мы приближаемся к 2020 году, мы можем с уверенностью предположить, что на стороне iOS резко упала статистика, поскольку статистика Apple колеблется только на 9% устройств, использующих более раннюю, чем iOS 12. При использовании показателей приложения Аудиокнига Дэвида Смита, менее 2%. пользователей используют iOS 10 ниже на момент написания этой статьи.

Итак, основываясь на более разумных принципах, мы можем удалить много шума. Google TV последний раз обновлялся в 2010 году. Apple перешла на Retina в 2010 году с iPhone 4 и с Touch и iPad в 2012 году. Opera Speed Dial исчезла в 2013 году, Opera Coast была удалена из магазина приложений Android в 2017 году.Итак, с пересмотренным списком у нас осталось семь основных значков (если у вас нет проекта с очень конкретными устаревшими требованиями). Microsoft потребовала метатеги msapplication-TileColor и msapplication-TileImage, чтобы IE10 в Windows 8 мог распознавать значки Favicons, которые также можно удалить из исходного списка.

Наконец, в манифесте веб-приложений Google отмечается, что Chrome принимает значки с шагом 48 пикселей и по умолчанию 192 или 512. Ради здравого смысла мы будем придерживаться только 192.

7 значков
ссылок в теге вашего сайта для каждого размера
Специальный файл XML для плиток меню «Пуск» Windows (8.1 и выше) (IE11 + и Windows 10 требует browserconfig.xml).

Почему не SVG?

Некоторые читатели, просматривающие этот список, могут задаться вопросом о масштабируемой векторной графике (SVG) как о более разумном решении вместо создания значков во всех возможных разрешениях, поскольку значки — один из лучших вариантов использования векторных изображений.На момент написания этой статьи только Firefox и Safari поддерживают значки SVG (с некоторыми оговорками). Более подробную информацию см. На CanIuse.com.

(Примечание автора: во время написания этой статьи, после проверки около 50 основных веб-сайтов, Instagram был единственным сайтом, на котором была опция значка SVG на своем веб-сайте)

Проверка работоспособности: Photoshop / Действия Automator / Шаблон эскиза

Я создал три разных способа создания 14 размеров значков. Три варианта следующие:

Photoshop Action — Если у вас есть Adobe Photoshop, это позволит вам использовать экшен Photoshop для быстрого создания 14 значков из исходного файла.Действия Photoshop позволяют Photoshop выполнять автоматические задачи, такие как изменение размера и экспорт файлов.
Automator — macOS / OS X предоставляет утилиту создания сценариев на уровне ОС, которая позволяет автоматизировать такие задачи, как перемещение / переименование файлов или использование различных функций приложения, таких как предварительный просмотр. Я создал сценарий автомата, который будет выполнять те же функции, что и экшен Photoshop. Преимущество в том, что для этого не требуется Photoshop, но требуется Mac.
Шаблон эскиза — Это наименее автоматизированная функция.Это пустой шаблон со всеми экспортными настройками 14 отдельных размеров. Просто вставьте значок в направляющие и нажмите «Экспорт», и все 14 размеров значков будут экспортированы как PNG.

Что вам абсолютно необходимо:

Квадратное изображение PNG размером 228 x 228 или больше.
Photoshop (Win / Mac) или macOS / OS X или Sketch

Приятно иметь:

Изображение с альфа-слоем (прозрачный фон)

Поддерживаемые браузеры:

IE11, Edge, Chrome 4+, Firefox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, Firefox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты для Windows 8+.

Чего не будут делать эти утилиты:

К сожалению, эта утилита не создает классический файл favicon.ico. В Photoshop до сих пор нет возможности создать ICO-файл, как и в Automator или Sketch. См .: Поддержка IE6 — IE10 (и проблема Safari) в этом сообщении для получения более подробной информации.

Кроме того, это не «лечит» значки.Для значков 32 x 32 пикселей и 16 x 16 пикселей может потребоваться ручная корректировка в графической программе. Помните, что создавать отдельные версии значков в зависимости от разрешения более чем возможно. Эта утилита представляет собой дробовик, который позволит вам улучшить базовый минимум после того, как будут созданы все значки. Для получения наиболее красивых значков с низким разрешением я настоятельно рекомендую рассмотреть возможность ручной подкраски значка 16 x 16 пикселей и значка 32 x 32 пикселей.

Загрузка шаблона Photoshop / macOS Automator / Sketch

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

Как установить Favicon Photoshop Action

Загрузите Photoshop Action и дважды щелкните, чтобы распаковать
В Photoshop в меню действий щелкните гамбургер-меню и выберите действия загрузки
Найдите создателя Favicon

Использование экшена Photoshop

Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Откройте изображение, которое хотите использовать для своего значка.Нажмите кнопку воспроизведения, и действие создаст 14 размеров значков в формате PNG.

Использование скрипта Automator

Перетащите файл в скрипт Automator. Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Нажмите «Играть», и Automator создаст 14 размеров иконок в PNG.

Использование шаблона эскиза

Откройте файл эскиза. Вставьте графику в направляющие, нажмите «Экспорт» и выберите экспорт «favicon».

Оптимизация

Неоптимизированные PNG из Photoshop, как правило, довольно большие. Я настоятельно рекомендую пользователям macOS использовать бесплатное приложение ImageOptim для сжатия PNG без потерь, а пользователи Linux используют Trimage. Оба варианта просты в использовании. Перетащите все недавно созданные PNG, чтобы сэкономить ценные килобайты изображений без какого-либо снижения качества. Пользователи macOS / Linux также могут использовать PNGOUT, утилиту интерфейса командной строки для оптимизации PNG.

Для более технически подкованных пользователей macOS утилита оптимизации PNG ImageAlpha (работает в тандеме с ImageOptim) позволяет пользователям еще больше использовать проиндексированные цветовые профили для уменьшения размеров файлов.

Наконец, PNGquant изначально работает в Photoshop для Windows / OS X, а TinyPNG предоставляет бесплатный сервис, который можно использовать из вашего веб-браузера на любой платформе.

Поддержка IE6 — IE10 (и проблема Safari)

Для действительно одержимых, IE10 и ниже не поддерживают значки PNG, только ICO. В зависимости от источника, IE10 и ниже по-прежнему составляют примерно 0,2–1,4% пользователей Интернета в Северной Америке в апреле 2017 года. К счастью, месяц за месяцем это число продолжает уменьшаться, но различается в зависимости от регионов земного шара и даже от страны. / языковая основа.IE10 был выпущен 4 сентября 2012 года в качестве браузера по умолчанию в Windows 8 и включен в Windows 7 SP1, но поскольку Windows 10 постепенно заменяет Windows 8, пользователи Internet Explorer все чаще переходят на замену Microsoft IE, Edge.

Если вы решите включить favicon.ico для старых пользователей IE, существует серьезное предупреждение Safari. На момент написания этого документа, если в HTML-код включены и ICO, и PNG, настольная версия Safari будет использовать файл ICO вместо PNG. Это проблема, поскольку большинство генераторов значков создают только значки размером 16 x 16 пикселей.Дисплеи Retina будут отображать менее привлекательный значок 16 x 16 вместо красивого PNG 32 x 32. Однако, без каких-либо затрат для пользователей IE, формат файла MS .ico может поддерживать как значок размером 16 x 16 пикселей, так и значок 32 x 32 пикселя в одном файле. Пользователи IE10 и ниже будут видеть значок 16 x 16, тогда как пользователи Retina Safari могут наслаждаться значком с гораздо более высоким разрешением 32 x 32 пикселя.

Для создания значков, совместимых с сетчаткой, требуется несколько дополнительных шагов. Ниже представлена адаптированная версия книги Джона Грубера «DaringFireball.com: Создание значков Retina Calibre Favicons ». Этот метод требует покупки IconSlate (5 долларов США).

Использование IconSlate для создания значка сетчатки (метод DaringFireball)

Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16.
Назовите значок «favicon» (без кавычек)
Выделите квадрат 32 и вставьте свой значок 32 x 32 пикселя
Выделите квадрат 16 и вставьте в него значок 32 x 32 пикселя или, если у вас есть собственный размер 16 x 16 пикселя, вставьте в него этот файл.
Щелкните значок Build (если по какой-либо причине значок Build неактивен, перейдите в File -> Build

Онлайн-генератор HTML + XML

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

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

См. Pen Favicon HTML / Browser XML Generator от Грега Ганта (@fuzzywalrus) на CodePen.

Манифест веб-приложения

Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно работать, когда оно «установлено» (ссылка на него находится на панели приложений Chrome). Этот файл JSON включает объявления для значков Favicons.Для получения дополнительной информации см. Манифест веб-приложения

Поздравляю! Готово!

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

Присоединяйтесь к веселью: внесите свой вклад в проект github здесь: https://github.com/fuzzywalrus/Photoshop-FavIcon-Action

[Обновлено 28.10.2019 на 2020 год со значительно уменьшенным набором иконок для здравомыслия]

Как отредактировать значок или значок в адресной строке.ico?

Проблема:

Могу ли я изменить файл «favicon.ico» для своих веб-сайтов?

Решение:

Да! Сделать это довольно просто.

Файл favicon.ico обычно представляет собой простое изображение размером 16×16, видимое в строке состояния браузера, вкладках и / или строке заголовка. Чтобы изменить это на свое собственное, просто сделайте следующее:

Создайте «favicon.ico »из вашего предпочтительного изображения. Вы можете использовать инструмент для редактирования изображений, например Adobe Photoshop, GIMP, MS Paint и т. Д., Или использовать этот веб-сайт: http://www.favicon.cc/.

Загрузите изображение в корневой каталог своего веб-сайта. Если это ваш основной домен, каталог будет «/ public_html /». Если это поддомен или дополнительный домен, перейдите в раздел cPanel → Domains → Subdomains или cPanel → Domain Manager, чтобы узнать, к какому каталогу назначен домен.

Очистите кеш браузера, затем снова посетите свой веб-сайт.

Предполагая, что вы загрузили в нужное место и кеш вашего браузера чист, он должен обновиться вместе с вашим изображением. В некоторых случаях вам может потребоваться посетить файл favicon.ico напрямую; просто перейдите на http://example.com/favicon.ico. (Замените example.com своим собственным доменом.)

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

Сопутствующее содержимое справки

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

У меня проблемы с рассылкой спама. Я считаю, что мой адрес электронной почты был собран (удален с моего сайта и продан спамерам). Могу ли я скрыть свой адрес электронной почты, но при этом люди будут мне писать?

Как мне внести свой IP-адрес в белый список? Я не могу войти в MySQL с удаленного компьютера с помощью инструмента администрирования MySQL (phpMyAdmin, Navicat, MySQLFront, MySQL-Admin и т. Д.).

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

Объясняет, как редактировать файл.htaccess

Статья базы знаний
282918 просмотров
Теги: htaccess

Чтобы установить форум phpBB с помощью MOJO Marketplace, войдите в cPanel и прокрутите вниз до категории «Программное обеспечение / Услуги».Щелкните значок MOJO Marketplace. Щелкните значок phpBB. Нажмите кнопку «Установить сейчас» bu

Как редактировать конфигурацию PHP — VPS или выделенный

В этой статье объясняется, как настроить, удалить или отредактировать задание Cron.

Как создать значок веб-сайта в CorelDRAW

Обучение
Практические руководства
Сделайте значок веб-сайта

Веб-значок, также известный как значок, значок сайта или значок веб-сайта, представляет собой небольшое изображение или логотип на вкладке веб-сайта.Дизайн значков так же прост, как настройка страницы, добавление иллюстраций и использование параметра «Экспорт» в CorelDRAW для создания файла .ICO. Веб-значки используются везде, от рабочего стола Windows до устройств iOS, OSX или Android, и все они имеют определенные особенности. требования.

1. Установите размер страницы

Размер документа зависит от размера изображения.В диалоговом окне «Новый документ» ( File> New ) в поле Name : введите имя файла как ‘4Sale’ . Затем из раскрывающегося списка Preset destination выберите Web . Вы заметите, что это изменило единицу измерения на пиксели и разрешение рендеринга с на 96 точек на дюйм. В разделе «Размер» установите ширину , , значение 130 и высоту , , значение 130. Щелкните OK .

2.Добавление графических элементов

Из ( Файл> Импорт ) перейдите туда, где находится логотип, и импортируйте его. Разместите логотип на странице и увеличьте его размер до 128 x 128.

3. Экспортируйте значок

При экспорте изображения, которое будет использоваться в качестве значка, рекомендуется использовать файл .ICO, хотя есть некоторые приложения, которые принимают другие форматы.Выберите дизайн и из ( File> Export ). В раскрывающемся списке Save as type выберите ICO — Windows 3.x / NT Icon Resource (* .ico; *. Exe; *. Dll . Убедитесь, что существует отметьте галочкой параметр Выбрано только . И нажмите Экспорт . Это откроет диалоговое окно Преобразовать в растровое изображение . В диалоговом окне Преобразовать в растровое изображение примите значения по умолчанию и нажмите ОК . Следующим открывается диалоговое окно Диалоговое окно «Преобразовать в палитру». Здесь вы можете выбрать тип палитры, которая должна быть реализована при создании файла ico.Убедитесь, что в раскрывающемся списке «Палитра» выбрано значение Optimized . Это обеспечит максимально плавные переходы между цветами.

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

Ознакомьтесь с некоторыми другими функциями графического дизайна в CorelDRAW Graphics Suite, такими как «Как сделать этикетку», «Как сделать флаер», «Как создать плакат» и многое другое! Создавайте высококачественные дизайны с помощью увлекательного и простого в использовании программного обеспечения для графического дизайна и сделайте свою работу ярче, чем когда-либо.

Как сделать брошюру

Как сделать подарочный сертификат

Как сделать свой собственный календарь

Как сделать инфографику

[Как] Создать значок Favicon и Apple для своего веб-сайта

Apple iPhone / iPad

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

Простое решение — бесплатный онлайн-генератор иконок для значков Apple и Favicon

Iconifier.net — это простое решение, которое при квадратном JPG, GIF или PNG сгенерирует набор значков различных размеров, чтобы вы могли использовать и выбирать те, которые вы хотите поддерживать на своем веб-сайте.Затем вам нужно загрузить сгенерированные значки и встроить их в код своего веб-сайта. Вы можете интегрировать эти шаги в свой процесс веб-дизайна.

Вставьте значок (значки) favicons на свой веб-сайт

После создания значка favicon.ico с помощью Iconifier.net выше и размещения его в корне вашего веб-сайта добавьте следующий код между и вашего веб-сайта

Значки Apple

После создания различных значков с помощью указанного выше веб-сайта, вам также нужно будет включить немного другой код для устройств Apple iPhone / iPad (и, возможно, Android).Снова загрузите сгенерированные файлы значков в корень вашего веб-сайта и поместите следующий код между тегами HEAD.

Устройства

iOS автоматически обрабатывают это в своем браузере, изменяют размер и добавляют некоторые эффекты, чтобы они соответствовали стилю устройства, на котором они видны.

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

Иконки для устройств Android

Android основывается на сенсорных иконках Apple, но ожидается, что эти иконки уже будут в их окончательной версии. Эта последняя версия является «ПРЕДВАРИТЕЛЬНОЙ», и устройства Android ожидают, что этот тег будет на месте.Поэтому загрузите новые версии с немного другими именами (например, добавив предварительно составленное имя), а затем добавьте следующую разметку. Самая важная часть — это rel = apple-touch-icon-precomposed. Поместите файлы в корень своего веб-сайта и добавьте этот код между тегами и вашего html

Более подробную информацию о Favicons можно найти в Wikepedia: https: // en .wikipedia.org / wiki / Favicon

Об авторе

Дэвид работал в онлайн / цифровой индустрии или около нее последние 18 лет. Он имеет обширный опыт работы в индустрии программного обеспечения и веб-дизайна с использованием WordPress, Joomla и связанных с ними ниш. Как консультант по цифровым технологиям, он сосредоточен на том, чтобы помочь предприятиям получить конкурентное преимущество, используя комбинацию их веб-сайтов и цифровых платформ, доступных сегодня.

Информация о favicon.ico

Обновлено: 08.05.2020, Computer Hope

Что такое favicon.ico?

favicon.ico — это небольшой значок, который можно найти в адресной строке URL-адреса и в закладках, созданных веб-браузерами.

Например, на изображении выше есть маленький значок () перед URL-адресом Computer Hope.

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

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

Наконец, файл favicon.ico должен быть загружен в корневой каталог на сервере, на котором размещена ваша веб-страница.

Можно ли анимировать иконку?

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

Может ли файл называться как-нибудь иначе, кроме favicon.ico?

Да, добавьте в свой HTML-код тег ниже в раздел вашего кода.

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

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

Кончик

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

Что такое favicon.gif?

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

Почему в моем браузере не отображается значок?

Значок может не отображаться по любой из указанных ниже причин.

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

Ico иконки для сайта: Бесплатные иконки SVG, PNG, ICO или ICNS

Page not found (404)

404 Icon by Laura Reen

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

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

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

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

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

что это такое и как его сделать

Формат favicon

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

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

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

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

favicon.ico и другие форматы, поддержка браузерами

Что такое favicon?

Что такое формат favicon .ico (ICO)?

Как подключить favicon?

Размещение favicon.ico в корне сайта

Подключение favicon через тег link

Подключение иконок через Web App Manifest: manifest.json

Подключение иконок через файл browserconfig.xml

Так много способов подключения иконки – какой использовать?

Почему столько много способов подключения favicon?

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

Рекомендации Chrome

Рекомендации Safari

Закрепленные вкладки в Safari

Плитки Microsoft Windows

Собираем все вместе

Разметка favicon

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

Нам действительно нужны все эти favicon?

Пусть браузер сам занимается уменьшением

Минимальный набор иконок

Будущее favicon

SVG favicon

Хотите узнать, что необходимо для создания сайта?

Иконка сайта.

Что такое иконка сайта?

Как подключить иконку к своему сайту?

Как самостоятельно изготовить файл favicon.ico?

Favicon (иконка сайта) | SEO-портал

Зачем нужна иконка Favicon для сайта?

Иконка сайта в браузере

Иконка сайта во вкладках браузера

Иконка сайта в закладках браузера

Иконка сайта перед адресной строкой браузера

Значение иконки сайта в SEO

Иконка сайта и ПС Яндекс

Favicon в сниппетах Яндекса

Предупреждение об отсутствии файла

Проверка наличия Favicon в индексе

Проверка Favicon на соответствие требованиям

Требования к иконке сайта

Название файла

Геометрический размер

Формат файла

Размещение на сайте

HTML-код иконки для сайта

Какой должна быть иконка сайта?

Привлекательность

Уникальность

Контрастность

Анимация в Favicon

Эффект прозрачности

Как сделать Favicon для сайта?

Онлайн-генератор favicon.cc

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

Создание новой фавиконки онлайн

Создание анимированной фавиконки

Онлайн-конвертер Favicon

Готовые бесплатные фавиконки

Создание Favicon в Photoshop

Особенности программы

Рисование Favicon

Сохранение фавиконки

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

Создание анимированной Favicon

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

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

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