HTML: Фавикон (favicon) — создание, добавление, польза
- Что такое фавикон
- Создание
- Добавление фавикона
Что такое фавикон
Фавикон (favicon — это сокращение от Favorite icon, в переводе с анг. означает любимый значок) — иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.
Создание
Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета.
Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.
При создании изображения следует обращать внимание на следующие нюансы:
- Фавикон должен быть выполнен в том же стиле, что и сайт, так как он является своего рода визитной карточкой вашего проекта.
- Изображение, которое вы хотите использовать в качестве фавикона, должно быть предельно простым для понимания, лучше используйте всего несколько элементов.
- Следите за тем, что бы фавикон, максимально передавал суть вашего сайта, бизнеса, проекта.
- Создавать картинку лучше так, что бы она вызывала у посетителей вашего сайта ассоциации. Например, иконка телефона, для салона мобильных телефонов.
В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте.
Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.
Добавление фавикона
Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:
<html>
<head>
<link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>
Примечание: обратите внимание, что для каждой веб-страницы или для каждого раздела сайта можно указать свой собственный фавикон.
В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:
| Google Chrome | Internet Explorer | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
| <link rel=»shortcut icon» href=»httр://mysite.  ru/myicon.ico»> | Да | Да | Да | Да | Да |
| <link rel=»icon» href=»httр://mysite.ru/image.ico»> | Да | Да (с IE 11) | Да | Да | Да |
| <link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»> | Да | Да (с IE 9) | Да | Да | Да |
| <link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»> | Да | Да (с IE 11) | Да | Да | Да |
| <link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»> | Да | Да (с IE 11) | Да | Да | Да |
| <link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»> | Да | Да (с IE 9) | Да | Да | Да |
Не стоит недооценивать значение фавикона, особенно сегодня, когда в сети Интернет находятся миллиарды сайтов и страниц, часть из которых являются вашими конкурентами.
Иконка сайта.
Что такое иконка сайта?
Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 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 впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.
HTML код фавиконки
Фавикон — это небольшой файл изображения, содержащий один или несколько значков, которые можно использовать для представления веб-сайта, блога или даже отдельной веб-страницы.
Фавиконы обычно появляются в таких местах, как вкладка браузера, адресная строка, история браузера, панель закладок и т. д. Фавиконы — отличный способ отличить ваш сайт от других, особенно когда у пользователей открыто много вкладок или они выполняют поиск в своем браузере. панель истории или закладок. Фавиконы помогают повысить узнаваемость вашего бренда, поскольку пользователи научатся ассоциировать цвета, шрифты и т. д. фавикона с вашим брендом при использовании вашего веб-сайта.
Если у вашего веб-сайта нет значка фавикона, пользователи обычно увидят обычный значок веб-страницы.
Добавление Favicon на ваш веб-сайт
Сначала вам нужно загрузить фавиконку на свой сервер. Вы можете назвать его как угодно и разместить где угодно, но если вы назовете его favicon.ico
Вот пример кода, который вы можете использовать. Поместите его внутрь элемента (замените местоположение изображения на местоположение используемого изображения):
Обратите внимание, что если вы используете этот код, вы можете назвать фавиконку как угодно.
Кроме того, хотя в этом примере используется расширение .ico , вы можете использовать другие форматы изображений, например .gif , . и даже анимированные GIF-файлы. Тем не менее, формат 
jpeg .ico довольно давно получил широкое признание в браузерах и является распространенным форматом при использовании фавиконов.
Фавиконы могут иметь размер 16×16, 32×32, 48×48 или 64×64 пикселя и 8-битную, 24-битную или 32-битную глубину цвета.
Значки главного экрана Apple iOS
Устройства Apple с операционной системой iOS версии 1.1.3 или более поздней (например, iPod Touch, iPhone и iPad) поддерживают возможность предоставления пользовательского значка, который будет отображаться на главном экране пользователей, когда они используют
Некоторые устройства Android также поддерживают эту функцию.
Чтобы предоставить значок для этой цели, загрузите значок на сервер, затем добавьте следующий код с HTML-кодом веб-сайта внутри элемента (замените местоположение изображения на местоположение изображения, которое будет использоваться ).
iOS добавит закругленные углы и отражающий блеск значку на главном экране iOS.
Если вы предпочитаете без отражающего блеска, используйте следующий код:
Значок HTML: практическое руководство
Значок HTML отображается на панели вкладок браузера рядом с названием веб-сайта. Фавикон — это небольшое изображение, которое идентифицирует веб-сайт, который посещает пользователь. Фавиконы объявлены в теге веб-страницы.
Вы заметили, что все или 99% вкладок вашего браузера имеют свой отличительный логотип сбоку? Что ж, это была самая крутая вещь (еще в 1999 году), когда Internet Explorer впервые ее поддержал.
Найдите подходящий учебный лагерь
- Career Karma подберет для вас лучшие технологические учебные курсы
- Доступ к эксклюзивным стипендиям и подготовительным курсам
Выберите интересующий вас вопрос
Software EngineeringDesignData ScienceData AnalyticsUX DesignКибербезопасностьИмя
Фамилия
Электронная почта
Номер телефона
Продолжая, вы соглашаетесь с нашими Условиями обслуживания и Политикой конфиденциальности, а также соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронная почта.
Это маленькое изображение или иконка favicon, обозначающая любимую иконку. Фавиконки не обязательны, но они распространены на большинстве веб-сайтов. Они также используются для ярлыков на нескольких устройствах. Таким образом, все веб-сайты и веб-приложения должны использовать фавиконы, чтобы выделиться.
Что такое HTML Favicon?
Фавикон HTML — это изображение, которое появляется в списке вкладок вашего браузера. Вы увидите свою иконку, если добавите сайт в закладки, а также на некоторых сайтах, которые позволяют вставлять ссылки. Фавикон позволяет пользователю легко идентифицировать сайт в списке вкладок, закладках и во встроенных списках ссылок.
Фавикон добавляется в тег
веб-страницы. Тег — это место, куда помещается вся так называемая «мета» информация. Метаинформация — это сведения о самой веб-странице, например заголовок страницы. Favicon HTML: традиционный способ добавления значка Favicon Предположим, вы закончили свое крутое приложение с использованием новейших технологий.
Вы хотите добавить немного бликов. Когда кто-то посещает URL-адрес вашего веб-сайта, он должен увидеть значок, идентифицирующий ваше приложение, на панели браузера. У вас есть готовый дизайн, и вы хотите добавить фавиконку на страницу.
Сначала вы должны убедиться, что ваше изображение является либо файлом ICO, либо сохранить его в формате PNG (для сохранения прозрачности). Размер файла должен быть не менее 16×16. Затем конвертируйте изображение в формат ICO.
Почему мы переходим на ICO? Мы делаем это, потому что браузеры имеют много разрешений, а фавиконы используются в качестве ярлыков. Файл ICO будет содержать множество изображений PNG для поддержки различных разрешений и ярлыков. Но у ICO есть свои недостатки, о которых мы поговорим чуть позже.
Вы можете использовать один из множества онлайн-инструментов для преобразования ICO из изображения PNG.
Ваш браузер выберет ваш значок, перетащив файл в корневой каталог. На практике добавим favicon.
ico в index.html между тег. Добавьте следующий код в тег
Обновите и проверьте всплывающий значок на вкладке ! Ветер.
Местоположение нашего изображения — /favicon.ico. Имеется в виду файл favicon.ico в корневой папке нашего сайта. Корневая папка — это основная папка, обычно та, в которой находится файл index.html.
Примечание : Если вы получаете сообщение об ошибке «favicon.ico Not Found», убедитесь, что значок называется favicon.ico . Затем убедитесь, что ваша иконка находится в основной папке вашего сайта. Наконец, убедитесь, что ваш index.html размещен в файле, который вы запрашиваете на своей веб-странице.
Фавикон HTML:
Более совместимый способ добавления фавикона Вы могли заметить, что фавикон работает не во всех системах. Это связано с тем, что формат ICO уже не так надежен .
Чтобы исправить это, HTML5 представил атрибут размеров , чтобы мы могли напрямую полагаться на файлы PNG. Сегодня нам не обязательно сжимать PNG в ICO!
Мы можем сохранить наше PNG-изображение в трех размерах, чтобы оно соответствовало favicon.ico (16×16), панели задач (32×32) и ярлыкам (96×96). Затем наш HTML-код тег можно изменить следующим образом:
<ссылка rel="icon" type="image/png" href="/favicon32x32.png">
Это должно сделать наш веб-сайт или приложение более соответствующим современным стандартам!
HTML Добавление фавиконки: становится все сложнееКогда дело доходит до поддержки мобильных веб-браузеров или больших дисплеев, наш потенциальный список фавиконов продолжает расширяться.
Возьмем, к примеру, apple-touch-icon , который в основном является значком, когда вы добавляете его на главный экран на устройстве iOS.
Что ж, если вы хотите оптимизировать для устройств iOS, да, вам понадобится специальный значок для этого.
Вот, наш список фавиконов растет:
Вы можете спросить, а как насчет устройств Android? Подождите, как мы перешли от этого единственного и сказочного favicon.ico к постоянно растущему их списку?
ЗаключениеЕсть отличные ссылки с открытым исходным кодом и множество генераторов favicon, которые помогут вам на вашем пути. Для небольшого приложения или проекта портфолио у вас может не хватить времени, чтобы охватить большинство или все экземпляры фавикона.
В конце концов все сводится к вашим потребностям. Не стесняйтесь экспериментировать с тем, что работает с вами. Одна из стратегий будет заключаться в том, чтобы начать с фавиконов размером 16 × 16 PNG, 32 × 32 PNG и 152 × 152 PNG, а затем расширять их.