HTML sizes Attribute
The sizes attribute specifies the sizes of icons for visual media.
This attribute is only used if rel=»icon» .
Browser Support
Syntax
Attribute Values
| Value | Description |
|---|---|
| HeightxWidth | Specifies one or more sizes for the linked icon. The height and width values are separated by an «x» or «X». |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Какие нужны фавиконки
Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!
Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.
Но ICO признали все браузеры и научились подключать его не только из корня сайта, но и из произвольного места. Если указать в голове документа , то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.
При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.
Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.
Иконки Apple в какой-то момент стали стандартом де-факто. Их начали подтягивать не только другие браузеры, но и другие сервисы, чтобы сделать иконку для вашего сайта. Проблема была в том, что это было слабо документировано, учитывало интересы только одной компании и несло само её имя в формате. Нужен был стандарт.
В HTML5 появилось расширенное описание : добавился атрибут sizes , чтобы указывать размеры, и атрибут type , чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes . Если иконка векторная — да, так тоже можно — укажите размер any . Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.
Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.
Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.
< "name": "My App", "icons": [< "src": "64.png", "sizes": "64x64" >, < "src": "128.png", "sizes": "128x128" >], "display": "fullscreen", "orientation": "landscape", "theme_color": "tomato", "background_color": "cornflowerblue" > А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.
Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.
Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.
Этого вам должно хватить, чтобы было красиво в основных современных браузерах. Но если нужно упороться по мелочам и сделать вот прямо идеально на каждой платформе — мои соболезнования и читайте документацию в описании к видео. Есть ещё сносный онлайновый генератор иконок, но я бы не доверил ему генерировать графику — будет мыльно. А вот код позаимствовать можно.
Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
What is favicon and what is the size of it in HTML?
A favicon is something that all of us see daily while browsing the web, but many of us don’t observe it or pay any need to it. A favicon goes by many other names as well, some of them being the favorite icon (hence the acronym favicon), shortcut icon, tab icon, website icon, or bookmark icon. It is the little image we see on a tab, or while making a bookmark of a page.
The small GeeksforGeeks image shown in the tab is the favicon we are talking about.
Types of favicons: Favicons can have different dimensions like 16×16, 32×32, 48×48, or 64×64 pixels in size. Additionally, they can have 8-bit, 24-bit, or 32-bit colour depth.
How to use a favicon?
There are two ways to implement a favicon:
- If the favicon is in .ico format:
- Copy the correctly formatted favicon.ico file to the host directory of the server where the website files are located. Generally this is public_html, but may change depending upon the configuration or hosting provider.
- The browser automatically detects the favicon and shows it.
- If the favicon is of some other format (for example jpg, BMP, gif, png):
- Copy the file to the host directory of the server where the website files are located. Generally this is public_html, but may change depending upon the configuration or hosting provider.
- Now we need to specify the image we would like to use as a favicon for our website. To do so, we need to add the following line inside the tags below the in our website code:
Output:
Favicon sizes:
| Size | Name | Purpose |
|---|---|---|
| 32×32 | favicon-32.png | Standard for most desktop browsers. |
| 57×57 | favicon-57.png | Standard iOS home screen. |
| 76×76 | favicon-76.png | iPad home screen icon. |
| 96×96 | favicon-96.png | GoogleTV icon. |
| 120×120 | favicon-120.png | iPhone retina touch icon. |
| 128×128 | favicon-128.png | Chrome Web Store icon & Small Windows 8 Star Screen Icon*. |
| 144×144 | favicon-144.png | Internet Explorer 10 Metro tile for pinned site* |
| 152×152 | favicon-152.png | iPad touch icon. |
| 167×167 | favicon-167.png | iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152) |
| 180×180 | favicon-180.png | iPhone 6 plus |
| 192×192 | favicon-192.png | Google Developer Web App Manifest Recommendation |
| 195×195 | favicon-195.png | Opera Speed Dial icon (Not working in Opera 15 and later) |
| 196×196 | favicon-196.png | Chrome for Android home screen icon |
| 228×228 | favicon-228.png | Opera Coast icon |
Note: major browsers are not supported by the sizing property of the favicon.
Vulnerabilities: Many web browsers display the favicons on the left side of the address bar, so they are often used as a part of a phishing attack on HTTPS pages. The attacker changes the favicon of the site to the familiar padlock sign (notifying an encrypted connection) to fool the users. To circumvent this, many popular and modern web browsers display the favicon in the tab only and display the security status of the protocol used to access the website beside the URL.