Сделать 🖼 Favicon для сайта
Как пользоваться сервисом для создания favicon?
- Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
- Нажмите «Создать Favicon»;
- Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.
Как установить отдельные фавиконы для мобильных устройств
Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, "apple-touch-icon", и атрибут sizes с размером.
Будет достаточно одного файла favicon.ico с размерами 48x48.
Этот обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Как установить favicon на сайт
- Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
- Добавьте ссылку на размещенный файл в HTML-код главной:
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
Зачем делать favicon?
Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.
Иконки favicon помогают сделать вкладку с вашим сайтом узнаваемой, это важно, когда пользователь одновременно открывает несколько ресурсов. С заметным фавиконом ваш сайт не потеряется среди других открытых вкладок.
Фавикон должен соответствовать цветовой гамме сайта и тематике компании. Вы можете использовать, например, логотип или первую букву названия или простое, но оригинальное графическое изображение, чтобы пользователь, увидев иконку вашего сайта, мог сразу определить, что на вкладке.
Запоминаемость брендаЕсли использовать в качестве фавикона логотип или его узнаваемый фрагмент, пользователи сайта будут часто его видеть и быстрее запомнят.
Как сделать Favicon для сайта
Что такое Favicon?
Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля.
Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.
Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):
И для сравнения, отображение иконки в браузере Internet Explorer:
Как сделать иконку для сайта
Сделать фавикон можно как используя стандартные возможности Photoshop (или другого графического редактора), так и с помощью всевозможных веб-сервисов.
Рисуем Favicon с помощью веб-сервиса
Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:
Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры.
При создании иконки сразу есть возможность предпросмотра:
Создаем Favicon из готового изображения
Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.
Устанавливаем Favicon на сайт
Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:
<link rel="icon" href="favicon.ico"; type="image/x-icon" />По умолчанию, если иконка для сайта явно не указана, браузер пытается загрузить файл favicon.ico из корня. Но лучше перестраховаться.
Также рекомендуется добавлять строку:
<link rel="shortcut icon" href="favicon.ico"; type="image/x-icon" />(для Internet Explorer).
Размер фавикона может быть 16x16, 32x32.
Полезное замечание
Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57x57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:
<link rel="apple-touch-icon" href="apple-favicon.png" />Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.
Иконки ICO для Windows 10:7:8:XP и сайтов
Иконки для Windows с символикой СССР.
Небольшой набор иконок в стиле начала прошлого века.
Яркие цвета для хорошего настроения и вашего рабочего стола 🙂
Сегодня в подборке забавные иконки знаменитых героев в мультяшном видео.
Всеми любимые покемоны теперь и на рабочих столах в виде иконок. В архиве предложены png и ico файлы.
Очень качественные, оригинальные, объемные иконки для рабочего стола или системной панели компьютера.
Очень оригинальные иконки больших размеров, очень красочные.
Выглядят, как будто разрушаются по частям.
Красочные иконки в стиле Adobe квадратной формы.
Весь набор иконок для панели быстрого запуска и замены системных иконок в стиле минимализма в черном и серых цветах.
Оригинальные иконки круглой формы с голубой неоновой подсветкой в едином стиле.
Оригинальные иконки в стиле винтаж очень креативно смотрятся на рабочем столе.
Бесплатные квадратные иконки в стиле минимализма для Windows в разрешении 32х32 px. Очень оригинальны и уникальны!
Большой набор иконок в стиле минимализма в светлых и серых тонах сделает Ваш компьютер уникальным.
Огромнейший набор бесплатных разноцветных иконок в стиле Metro с логотипами известных программ в оригинале, что поможет Вам улучшить их узнаваемость.
Бесплатные иконки в форме шестиугольника в оранжевых и черных тонах смогут помочь Вам заменить стандартные иконки для различных вэб-ресурсов и программ.
Иконка сайта (favicon.ico) - Бесплатный онлайн-конвертер
Также фэвикон может быть показан и поисковыми системами, перед названием и описанием сайта. С тем, где расположена иконка и что это такое разобрались, следующий этап — непосредственно создание.Есть многочисленные способы создание иконок:
- Создание иконки с помощью нашего онлайн сервиса — это самый лёгкий способ. Просто выберите файл и укажите нужный вам размер иконки и сервис сам сформирует формат и размер.
- Очень популярны и программы для создания иконок, они также помогают экономить время. У данных программ очень большой спектр функций, одни могут работать, даже не с одной фотографией или картинкой, а другие хвалятся плавным переходом цветов и трёхмерными вариантами изображения.
- Ещё один вариант — это создание иконки самим, то есть с помощью небезызвестного фотошопа или даже просто Paint`а.
- иконка должна отображать название или суть ресурса, то есть должна давать ответ на вопрос: о чём сайт? Если сайт корпоративный или у вас есть логотип - то разместите его в качестве favicon.
ico предварительно сконвертировав ваш файл в иконку с помощью нашего сервиса. - размер должен быть стандартный — это 16 на 16 или 32 на 32. Лучший вариант - создать иконки, содержащую несколько размеров.
- чтобы добавить иконку, нужно скинуть её на корень сайта, на сервер. Самый простой способ добавления - это переименовать вашу иконку в файл с именем favicon.ico и веб-сервер автоматически будет отображать её на вашем сайте.
- формат для иконок универсален это формат ico, но есть также и поддержка анимации и jpeg файлов. Следует отметить что не все браузеры поддерживают отображение анимации и jpeg, поэтому лучший вариант -это обычная иконка
Иконка сайта.
Что такое иконка сайта?
Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 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) для сайта?
Как изменить иконку (favicon) для сайта?
В инструкции рассмотрены следующие вопросы:
Зачем нужен favicon для сайта?
Favicon (англ. favorite icon - избранный значок) - это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:
Вот где можно увидеть такую иконку:
- Закладки и вкладки браузера
- Результаты поиска Яндекс, Google
- Каталоги и рейтинги, которые загружают favicon сайтов
- Панель задач и рабочий стол операционной системы
Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска.
Favicon повышает узнаваемость сайта.
Где взять иконку для сайта?
По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:
- Найти в интернете готовый файл иконки с расширением .ico (например, здесь)
- Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
- Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)
При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.
Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180x180 пикселей.
Как установить иконку на сайт?
Когда у вас будут готовы файлы иконок с расширением 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) для сайта?
категорий значков - Iconfinder
20,793 иконки Сельское хозяйство, сельское хозяйство и садоводство
47,658 иконок ИИ, роботы и дроны
1600 иконок Животные
44 634 иконки Архитектура и городское планирование
290 иконок Стрелки
54043 иконки Арт Дизайн
3,847 иконок Искусство и мультимедиа
3413 иконок Автосервис и ремонт
2,302 иконки Аватары
174,180 иконок Награды
3250 иконок Младенцы, дети и детство
23,202 иконки Банковское дело и финансы
4947 иконок Баскетбол
530 иконок Черная пятница и киберпонедельник
2632 иконки Здания
57 163 иконки Деловые финансы
52 иконки
бесплатных иконок в SVG и PNG
Бесплатные иконки SVG
со сверхбыстрым поиском и бесплатной колой.
Создан для развлечения с помощью Icons8.
Иконки Facebook
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Facebook как значок
- Значок Facebook
- Значок Facebook
Телефонные иконки
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
- Значок гарнитуры
Иконки YouTube
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
- Значок YouTube 2
Иконки веб-сайтов
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
- Значок веб-сайта
Google Иконки
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
- Значок веб-поиска Google
Иконки Instagram
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
- Instagram старый значок
Иконки электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
Twitter Иконки
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
- Значок Twitter
E Иконки электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
- Значок электронной почты
Иконки электронной почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
- Значок почты
CSS-иконок
Как добавить значки
Самый простой способ добавить значок на HTML-страницу - использовать библиотеку значков,
например Font Awesome.
Добавьте имя указанного класса значка к любому встроенному элементу HTML (например, или
).
Все значки в библиотеках значков ниже являются масштабируемыми векторами, которые могут настраиваться с помощью CSS (размер, цвет, тень и т.д.)
Font Awesome Icons
Чтобы использовать значки Font Awesome, перейдите на
fontawesome.com, войдите в систему и получите код для добавления в раздел вашей HTML-страницы:
Узнайте больше о том, как начать работу с Font Awesome, в нашем Шрифт Отличный урок 5.
Примечание: Скачивание или установка не требуется!
Пример