How to use apple touch icons with any blog or website?

В каком формате должен быть фавикон

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

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

macOS Safari

Can I define a theme color without an icon for the Safari pinned tab?


No. Even the doubtful (a markup without its attribute) is ignored by Safari.

When using the W3C Validator, I get the error «Attribute not allowed on element at this point». What to do about this?

Apple specifications for the Mask Icon are not compliant with W3C. It’s that simple. This issue is completely harmless. Browers simply ignore this declaration. By the way it is only supported by macOS Safari.

If W3C validation is a concern, the only workaround is to remove the whole Mask Icon declaration (ie. ). Simply removing the attribute does not work. If the attribute is not present, macOS Safari ignores the Mask Icon entirely, making it completely useless.

4) Use an iOS Device and Bookmark the Site

This is the easiest part, grab an iOS device (preferably an iPad 3 to confirm the retina aspect) and open Safari. Refresh the web site you uploaded the icon to, and then tap the arrow icon and select “Add to Homescreen” name the bookmark, then return to the Homescreen to confirm it’s there.

Despite being 512 x 512 pixels, the retina icon will scale down fine on older iPhones and non-retina devices. If you really want to, you can use CSS and HTML to display different sized icons to different devices, but it’s really not necessary.

Now if someone bookmarks your web site on an iPad with a retina display, it will look a lot better on their home screen. That’s really all there is to it. And yes, we’ve written about the Apple touch icon before, but it deserves another mention now that iPad 3 demands significantly higher resolution icons and graphics.

Universal Windows Platform (UWP)

The following information was derived from:https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets

Splash Screen sizes derived from:https://msdn.microsoft.com/library/windows/apps/br211467

Based on the description provided here, the system selects appropriate images based on the following scheme:

<name>.scale-<scale>.<ext>

Where <name> can be anything you want. According to the guide, they’re recommending using a naming convention of «AppNameSmallTile.scale-XXX.png». I found this to be rather confusing, so I decided to just stick with naming the images according to the attribute definition, which I believe is less confusing.

When referencing an image in your code, just use NAME.EXT. The «.scale-XXX» portion of the file name is not included in the code. The system automatically selects the appropriate image/scale as needed. Icon Slayer uses a naming convention that matches the element attribute, I believe this is least confusing.

Example:

<uap:VisualElements    Square150x150Logo="Assets\Square150x150Logo.png"    Square44x44Logo="Assets\Square44x44Logo.png">            

Архив блога

  • ► 

    2018

    (2)

    • ► 

      апреля

      (1)

      ► 

      27 апр

      (1)

    • ► 

      февраля

      (1)

      ► 

      08 фев

      (1)

  • ► 

    2017

    (5)

    • ► 

      декабря

      (2)

      ► 

      13 дек

      (2)

    • ► 

      июля

      (1)

      ► 

      14 июл

      (1)

    • ► 

      марта

      (1)

      ► 

      22 мар

      (1)

    • ► 

      января

      (1)

      ► 

      23 янв

      (1)

  • ► 

    2016

    (7)

    • ► 

      декабря

      (1)

      ► 

      29 дек

      (1)

    • ► 

      октября

      (2)

      ► 

      26 окт

      (1)

      ► 

      13 окт

      (1)

    • ► 

      сентября

      (1)

      ► 

      26 сен

      (1)

    • ► 

      марта

      (1)

      ► 

      02 мар

      (1)

    • ► 

      февраля

      (1)

      ► 

      19 фев

      (1)

    • ► 

      января

      (1)

      ► 

      27 янв

      (1)

  • ► 

    2015

    (11)

    • ► 

      октября

      (1)

      ► 

      23 окт

      (1)

    • ► 

      сентября

      (1)

      ► 

      24 сен

      (1)

    • ► 

      июля

      (3)

      ► 

      14 июл

      (1)

      ► 

      13 июл

      (1)

      ► 

      10 июл

      (1)

    • ► 

      апреля

      (1)

      ► 

      23 апр

      (1)

    • ► 

      марта

      (2)

      ► 

      27 мар

      (1)

      ► 

      18 мар

      (1)

    • ► 

      февраля

      (1)

      ► 

      04 фев

      (1)

    • ► 

      января

      (2)

      ► 

      28 янв

      (1)

      ► 

      22 янв

      (1)

  • ► 

    2014

    (6)

    • ► 

      декабря

      (1)

      ► 

      18 дек

      (1)

    • ► 

      ноября

      (1)

      ► 

      10 ноя

      (1)

    • ► 

      сентября

      (1)

      ► 

      26 сен

      (1)

    • ► 

      июня

      (1)

      ► 

      03 июн

      (1)

    • ► 

      мая

      (1)

      ► 

      21 мая

      (1)

    • ► 

      февраля

      (1)

      ► 

      18 фев

      (1)

  • ▼ 

    2013

    (24)

    • ► 

      декабря

      (2)

      ► 

      17 дек

      (1)

      ► 

      12 дек

      (1)

    • ► 

      ноября

      (1)

      ► 

      08 ноя

      (1)

    • ► 

      октября

      (5)

      ► 

      29 окт

      (1)

      ► 

      28 окт

      (1)

      ► 

      15 окт

      (1)

      ► 


      04 окт

      (2)

    • ► 

      августа

      (2)

      ► 

      13 авг

      (1)

      ► 

      01 авг

      (1)

    • ▼ 

      июля

      (1)

      • ▼ 

        07 июл

        (1)

        Генераторы многослойных favicon, Apple-иконки, Ope…

    • ► 

      июня

      (6)

      ► 

      25 июн

      (1)

      ► 

      21 июн

      (1)

      ► 

      20 июн

      (1)

      ► 

      19 июн

      (1)

      ► 

      14 июн

      (1)

      ► 

      11 июн

      (1)

    • ► 

      мая

      (1)

      ► 

      06 мая

      (1)

    • ► 

      марта

      (2)

      ► 

      31 мар

      (1)

      ► 

      12 мар

      (1)

    • ► 

      февраля

      (2)

      ► 

      18 фев

      (1)

      ► 

      07 фев

      (1)

    • ► 

      января

      (2)

      ► 

      23 янв

      (1)

      ► 

      09 янв

      (1)

  • ► 

    2012

    (34)

    • ► 

      декабря

      (2)

      ► 

      03 дек

      (1)

      ► 

      01 дек

      (1)

    • ► 

      ноября

      (7)

      ► 

      25 ноя

      (1)

      ► 

      22 ноя

      (2)

      ► 

      15 ноя

      (1)

      ► 

      08 ноя

      (1)

      ► 

      03 ноя

      (1)

      ► 

      02 ноя

      (1)

    • ► 

      октября

      (1)

      ► 

      18 окт

      (1)

    • ► 

      сентября

      (4)

      ► 

      21 сен

      (1)

      ► 

      10 сен

      (3)

    • ► 

      августа

      (2)

      ► 

      25 авг

      (1)

      ► 

      22 авг

      (1)

    • ► 

      июля

      (2)

      ► 

      27 июл

      (1)

      ► 

      03 июл

      (1)

    • ► 

      июня

      (5)

      ► 

      12 июн

      (2)

      ► 

      11 июн

      (1)

      ► 

      08 июн

      (1)

      ► 

      07 июн

      (1)

    • ► 

      мая

      (10)

      ► 

      27 мая

      (1)

      ► 

      24 мая

      (2)

      ► 

      16 мая

      (1)

      ► 

      14 мая

      (2)

      ► 

      12 мая

      (1)

      ► 

      11 мая

      (1)

      ► 

      10 мая

      (2)

    • ► 

      января

      (1)

      ► 

      30 янв

      (1)

  • ► 

    2011

    (19)

    • ► 

      ноября

      (2)

      ► 

      30 ноя

      (1)

      ► 

      10 ноя

      (1)

    • ► 

      сентября

      (7)

      ► 

      23 сен

      (1)

      ► 

      13 сен

      (1)

      ► 

      12 сен

      (2)

      ► 

      09 сен

      (2)

      ► 

      01 сен

      (1)

    • ► 

      августа

      (4)

      ► 

      30 авг

      (1)

      ► 

      27 авг

      (1)

      ► 

      26 авг

      (1)

      ► 

      24 авг

      (1)

    • ► 

      июля

      (1)

      ► 

      25 июл

      (1)

    • ► 

      июня

      (1)

      ► 

      01 июн

      (1)

    • ► 

      апреля

      (2)

      ► 

      27 апр

      (1)

      ► 

      25 апр

      (1)

    • ► 

      марта

      (2)

      ► 

      29 мар

      (1)

      ► 


      19 мар

      (1)

  • ► 

    2010

    (59)

    • ► 

      декабря

      (3)

      ► 

      24 дек

      (1)

      ► 

      12 дек

      (1)

      ► 

      11 дек

      (1)

    • ► 

      ноября

      (5)

      ► 

      22 ноя

      (2)

      ► 

      13 ноя

      (2)

      ► 

      03 ноя

      (1)

    • ► 

      октября

      (3)

      ► 

      12 окт

      (1)

      ► 

      11 окт

      (1)

      ► 

      01 окт

      (1)

    • ► 

      сентября

      (3)

      ► 

      16 сен

      (1)

      ► 

      15 сен

      (2)

    • ► 

      августа

      (3)

      ► 

      28 авг

      (1)

      ► 

      17 авг

      (1)

      ► 

      02 авг

      (1)

    • ► 

      июля

      (4)

      ► 

      14 июл

      (1)

      ► 

      13 июл

      (1)

      ► 

      01 июл

      (2)

    • ► 

      июня

      (5)

      ► 

      29 июн

      (1)

      ► 

      23 июн

      (1)

      ► 

      21 июн

      (1)

      ► 

      17 июн

      (1)

      ► 

      11 июн

      (1)

    • ► 

      мая

      (4)

      ► 

      26 мая

      (1)

      ► 

      15 мая

      (1)

      ► 

      13 мая

      (1)

      ► 

      12 мая

      (1)

    • ► 

      апреля

      (9)

      ► 

      26 апр

      (1)

      ► 

      23 апр

      (1)

      ► 

      15 апр

      (3)

      ► 

      08 апр

      (1)

      ► 

      07 апр

      (2)

      ► 

      01 апр

      (1)

    • ► 

      марта

      (5)

      ► 

      30 мар

      (1)

      ► 

      15 мар

      (1)

      ► 

      09 мар

      (1)

      ► 

      08 мар

      (1)

      ► 

      05 мар

      (1)

    • ► 

      февраля

      (3)

      ► 

      22 фев

      (1)

      ► 

      18 фев

      (1)

      ► 

      17 фев

      (1)

    • ► 

      января

      (12)

      ► 

      27 янв

      (2)

      ► 

      24 янв

      (1)

      ► 

      18 янв

      (1)

      ► 

      14 янв

      (1)

      ► 

      06 янв

      (1)

      ► 

      05 янв

      (1)

      ► 

      04 янв

      (2)

      ► 

      02 янв

      (3)

  • ► 

    2009

    (8)

    • ► 

      декабря

      (3)

      ► 

      24 дек

      (1)

      ► 

      18 дек

      (1)

      ► 

      09 дек

      (1)

    • ► 

      ноября

      (1)

      ► 

      01 ноя

      (1)

    • ► 

      октября

      (1)

      ► 

      12 окт

      (1)

    • ► 

      июля

      (1)

      ► 

      29 июл

      (1)

    • ► 

      июня

      (1)

      ► 

      19 июн

      (1)

    • ► 

      апреля

      (1)

      ► 

      29 апр

      (1)

  • ► 

    2008

    (6)

    • ► 

      апреля

      (1)

      ► 

      26 апр

      (1)

    • ► 

      марта

      (1)

      ► 

      16 мар

      (1)

    • ► 

      февраля

      (2)

      ► 

      27 фев

      (1)

      ► 

      23 фев

      (1)

    • ► 

      января

      (2)

      ► 

      15 янв

      (1)

      ► 


      13 янв

      (1)

  • ► 

    2007

    (9)

    • ► 

      декабря

      (3)

      ► 

      18 дек

      (1)

      ► 

      17 дек

      (1)

      ► 

      05 дек

      (1)

    • ► 

      ноября

      (2)

      ► 

      29 ноя

      (1)

      ► 

      28 ноя

      (1)

    • ► 

      июля

      (4)

      ► 

      27 июл

      (1)

      ► 

      21 июл

      (1)

      ► 

      20 июл

      (1)

      ► 

      19 июл

      (1)

Apple Touch Icons

Apple iOS has a feature called “Add to Home Screen”, which basically makes your mobile website look like an app (it hides the browsers’ address bar and everything); the Apple touch icon offers a device-specific app icon for this makeshift app.

Here’s an updated breakdown of the sizes (px) required:

  • 120×120: iPhone Retina (iOS 7)
  • 180×180: iPhone 6 Plus (iOS 8+)
  • 152×152: iPad Retina (iOS 7)
  • 167×167: iPad Pro (iOS 8+)

And the syntax:

Note: anything “retina” and earlier will resize the default 120px icon since no attribute was specified.

For more information on touch icons, see Apple’s official documentation, which also explains how to remove the status bar, add a custom app title, and even a launch screen for your web-app.

Do you actually need to declare these HTML tags in the ? No. As long as the touch icons are uploaded to the root folder of the website, Apple will know to look for them there, however, other operating systems also use these icons — even Android! It’s better to define them in the .

Windows

Windows 10 (Metro UI) uses a tile format to display app icons (with an alternative “Add site to Apps” option), which is a little more complex when compared to other methods, but we’ll start with the sizes (px) before discussing implementation.

  • 70×70
  • 270×270
  • 310×310
  • 310×150

Note: the 270x will be scaled to 150x on low-density screens.

A file with the following code should be uploaded to the root directory of your website:

Other Icons

Are there any more? Of course, to name a few:

  • 128×128: Chrome Webstore icon
  • 196×196: Android Chrome icon
  • 228×228: Opera Coast icon

Social Media Shares

You can also specify custom images for those that share your webpages on social media (if you don’t, the sharer can instead choose an image that appears in the webpage’s content). While theoretically, these images can be almost any size, there will be a recommended size depending on where the webpage is being shared (, , etc). 1200×630 and larger (and under 1mb, and with a 1.91:1 ratio) is ideal overall.

Each social media site has their own size recommendation for images; this brilliant social media cheatsheet from CSS Tricks will explain which sizes are recommended and their HTML syntax.

File Locations

Copy the Apple Launcher icons to the root folder of your website unless you are specifying alternative locations via your HTML code.

The favicon.ico is typically installed by copying the favicon.ico to the the root folder of your website although some exceptions are:

  • On Joomla websites, copy the favicon.ico to your active template folder at /templates/.
  • On WordPress websites you may need to upload the favicon.ico file to your current theme’s main folder as well as your website root folder.
  • On Drupal websites, navigate to the admin/build/themes/settings/ page in the admin area of the site and choose the favicon.ico file in the ‘Shortcut icon settings’ section of the theme configuration page and upload the file. For more details, see the official Drupal favicon changing instructions.

My Thoughts

I think it’s definitely worth setting up favicons for as many different devices as possible. You never know who will want to pin or favorite the site on whatever device they have. That extra bit of effort can go a long way, as with many things in development. The problem is the standard for favicons is terrible right now. Between all the different devices, operating systems, browsers, and screen resolutions out there, to support everyone is a huge pain and it pollutes the of your HTML document with numerous lines of tags. To be perfect every single time requires lots of research and testing.

I like the concept of an .ico file supporting multiple sizes in a single file, but what I really want is vector support for favicons (like an SVG image). This way I could do it once and know I’m supporting everyone’s needs, but that will probably never happen.

Note: It’s probably worth saying that favicon images need to be custom tailored in some cases. For example, you may want a different image depending on the size. So even if a vector image was possible, it may not be ideal.

3) Upload the Website Bookmark Touch Icon to the Base Web Directory

Use an SFTP client (OS X includes FTP in the Finder, and CyberDuck or Filezilla are free) to copy the apple-touch-icon.png file to the root web directory. This is usually the same location that the sites main index file is located. Once uploaded, confirm it’s in the proper location by opening a web browser and going to “http://SITEURL.com/apple-touch-icon.png” and making sure it loads.

Here is an example of a 512×512 retina-ready bookmark icon from OSXDaily.com:

Notice that without the -precomposed flag, the above icon will display the highlight bubble. You can see the difference between the two by comparing the actual icon to the one shown in screenshots as the bookmark.

Ответы на вопрос(11)

11 мар. 2017 г., 15:05

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

на ваш файл и некоторые на ваш каталог. Перенаправление на вместо тоже работает

Комментировать

18 сент. 2012 г., 15:54

Попробуйте изменить ссылку с

чтобы:

Свернуть комментарии

20 февр. 2015 г., 22:25

Свернуть комментарии

13 апр. 2017 г., 11:07

Просто создайте файлы нулевого размера, называемые соответствующими именами.

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

Комментировать

19 дек. 2012 г., 19:00

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

мы обработали этот и другие запросы не-HTML 404 в моем ApplicationController следующим образом:

 Ответ заботится о изображениях, таких как этот файл PNG (который не существует для моего сайта).

Комментировать

Решение Вопроса

02 окт. 2012 г., 02:04

Я думаю, что устройства Apple делают эти запросы, если владелец устройства добавляет сайт к нему. Это эквивалент значка. Чтобы решить, добавьте 2 100 ×100 png файлов, сохраните их как apple-touch-icon-precomposed.png и apple-touch-icon.png и загрузите их в корневой каталог сервера. После этого ошибка должна исчезнуть.

Я заметил много запросов на apple-touch-icon-precomposed.png и apple-touch-icon.png в журналах, которые пытались загрузить изображения из корневого каталога сайта. Сначала я подумал, что это неверная конфигурация мобильной темы и плагина, но позже выяснил, что устройства Apple отправляют эти запросы, если владелец устройства добавляет к нему сайт.

Свернуть комментарии

22 сент. 2016 г., 16:28

Я наконец-то решил !! Это’сВеб-клип функция на устройствах Mac. Если пользователь хочет добавить ваш сайт в Dock o Desktop, он запрашивает этот значок.

как решить?: Добавьте значок для решения проблемы.

Комментировать

18 дек. 2012 г., 16:37

То же самое происходит со мной. И да, как сказал @Joao Leme, похоже, это связано с тем, что пользователь делает закладку на сайт на домашнем экране своего устройства.

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

FWIW, поместите значки в каталог / public.

Свернуть комментарии

26 дек. 2016 г., 23:55

Если вы закончили поиск в Google, это простая конфигурация для предотвращения этой ошибки при заполнении журналов веб-сервера:

Apache virtualhost

Серверный блок Nginx:

PS: возможно вы хотите добавить а также тоже.

Комментировать

15 авг. 2013 г., 15:30

Если пользователь с веб-браузера Safari (устройства Apple) посещает ваш сайт. Браузер пытается получить значок сайта, если он не определен в в следующем порядке:

яблоко-сенсорный значок-57×57-precomposed.pngяблоко-сенсорный значок-57×57.pngяблоко-сенсорный значок-precomposed.pngяблоко-сенсорный icon.png

Чтобы решить эту проблему, определите значок для веб-браузеров Safari или устройств Apple. Добавьте что-то подобное в заголовок раздела вашего сайта:

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

размер значка по умолчанию составляет 57 пикселей.

Свернуть комментарии

Тихановская — президент Беларуси

ASCIIHTMLrobots.txtSEOWYSIWYGВалидаторыВеб-мастеруВеб-редакторыГенератор иконокИнтернетСправкаСсылки

Favicon

Favicon(англ. Favorites iconбукв. иконка любимой вещи, означает значок для закладок)Значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Форматы иконок

  • image/x-icon для формата ICO;
  • image/gif для формата GIF;
  • image/jpeg для формата JPEG;
  • image/png для формата PNG;
  • image/bmp для формата BMP.

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

Ну и размер должен быть 16X16 пикселей. Так будет корректно отображаться. Формат ICO позволяет делать прозрачный фон.

Код простых иконок для браузера

<link rel=»icon» href=»http://имя сайта/favicon.ico» type=»image/x-icon»>

или

<link rel=»shortcut icon» href=»http://имя сайта/favicon.ico» type=»image/x-icon»>

Дело в том, что сегодня ситуация усложнилась благодаря большому распространению планшетов и смартфонов.

Код мобильных иконок

Такой код подойдет для iPhone, Android …

<link rel=»apple-touch-icon» sizes=»57×57″ href=»/apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» sizes=»114×114″ href=»/apple-touch-icon-114×114.png»> <link rel=»apple-touch-icon» sizes=»72×72″ href=»/apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» sizes=»144×144″ href=»/apple-touch-icon-144×144.png»> <link rel=»apple-touch-icon» sizes=»60×60″ href=»/apple-touch-icon-60×60.png»> <link rel=»apple-touch-icon» sizes=»120×120″ href=»/apple-touch-icon-120×120.png»> <link rel=»apple-touch-icon» sizes=»76×76″ href=»/apple-touch-icon-76×76.png»> <link rel=»apple-touch-icon» sizes=»152×152″ href=»/apple-touch-icon-152×152.png»> <link rel=»icon» type=»image/png» href=»/favicon-196×196.png» sizes=»196×196″> <link rel=»icon» type=»image/png» href=»/favicon-160×160.png» sizes=»160×160″> <link rel=»icon» type=»image/png» href=»/favicon-96×96.png» sizes=»96×96″> <link rel=»icon» type=»image/png» href=»/favicon-16×16.png» sizes=»16×16″> <link rel=»icon» type=»image/png» href=»/favicon-32×32.png» sizes=»32×32″> <meta name=»msapplication-TileColor» content=»#da532c»> <meta name=»msapplication-TileImage» content=»/mstile-144×144.png»>

Веб мастеру Учебники-справочники htaccess CHMOD ERROR — таблица кодов возврата

МЕТА-теги CSS MySQL шпаргалки robots.txt Защита от авто-заполнения форм Redirect Валидность Софт Web soft Лучшие веб-утилиты Онлайновые WYSIWYG WAP софт Favicon Favicon Редакторы иконок Генераторы иконок онлайн Генератор иконок для смартфонов онлайн RSS RSS Примеры RSS Пример Atom-документа

Подать статьюРассылкаО нас Почта Графика

ШрифтыЛоготипыБрендбукиПиктограммыГеральдика

Популярное

Уровень сайтаРегистрация сайтаКак сделать сайт1 место на GoogleПереводчики ОнлайнПароль

Топ интернета

Ph4 в социальный сетях, рассылки и контакт

2005-2020, Веб-студия Ph4 — Каталог интернета пользователю, веб-мастеру и дизайнеру

Methodology

The picture is famous but not required to enable the Apple touch icon. There are actually four ways to display this icon:

  • HTML declaration. For example,
  • Dimension-specific pictures, such as
  • Precomposed touch icons (eg. )

As a consequence, when a web site as no or this picture is somewhat wrong, it may still support the Apple touch icon successfully. For example, by providing alternative pictures declared in the HTML code.

To collect data, some portions of the favicon checker were reused. The script parsed the Alexa top web sites listing and requested each site using an iPad Mini user agent to make sure it gets the mobile version of the site. Then, it tried to download and get its dimensions. All failures were ignored. For example, when the file is not present, some sites do not return a plain 404 error but an error page. The script failed at parsing such “picture”, yet this case was not distinguished from genuine corrupted pictures.

The 129×129 dimension, used by 49 sites, is a bit special. Apparently, it has been the dimension of the of Apple for a while, making it somehow “official”. Yet, I chose to consider it as non-official since there is apparently no reason for such resolution.

Oh, and in case you wonder, yes, I cleared my browser history at the end of this study. Thank you for reminding me.

iOS

Covers iOS apps up to iOS v10 for iPhone 4-5-6-7, iPad, iPad Pro, iPad Mini.

The following information was derived from generating a iOS project in Xcode version 8.1 (8B62).

Replace the «AppIcon.appiconset» folder within the «Assets.xcassets» folder within your Xcode project:

/Assets.xcassets/AppIcon.appiconset

Points File Name Pixels
20pt iPhone Notification iOS 7-10  
  iphone-notification-20pt@2x 40
  iphone-notification-20pt@3x 60
     
29pt iPhone Spotlight iOS 5,6 Settings iOS 5-10  
  iphone-spotlight-settings-29pt@2x 58
  iphone-spotlight-settings-29pt@3x 87
     
40pt iPhone Spotlight iOS 7-10  
  iphone-spotlight-40pt@2x 80
  iphone-spotlight-40pt@3x 120
     
60pt iPhone App iOS 7-10  
  iphone-app-60pt@2x 120
  iphone-app-60pt@3x 180
     
20pt iPad Notifications iOS 7-10  
  ipad-notifications-20pt@1x 20
  ipad-notifications-20pt@2x 40
     
29pt iPad Settings iOS 5-10  
  ipad-settings-29pt@1x 29
  ipad-settings-29pt@2x 58
     
40pt iPad Spotlight iOS 7-10  
  ipad-spotlight-40pt@1x 40
  ipad-spotlight-40pt@2x 80
     
76pt iPad App iOS 7-10  
  ipad-app-76pt@1x 76
  ipad-app-76pt@2x 152
     
83.5pt iPad Pro App iOS 9-10  
  ipad-pro-app-83.5pt@2x 167

Why Another Free Online Icon Generator?

Details
Published: Saturday, 12 January 2013 01:41

Correct File Names

iconifier.net creates all the required Apple Launcher icons using file names that devices expect so you needn’t specify the icon locations in your HTML unless you have some special requirements such as different icons for each page or wish to help Android devices find the correct icons.

  • apple-touch-icon-144×144.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-57×57.png
  • apple-touch-icon.png

Transparency Preserved

Transparency is preserved so transparent PNG or GIF source files result in transparent PNG Apple Launcher and favicon files.

Higher Resolution Multiple Format Favicon

iconifier.net creates fully valid ICO formatted favicon files with multiple embedded sizes of 16 x 16, 24 x 24, 32 x 32, 48 x 48 and 64 x 64 so that the optimum quality favicon will be displayed whichever web browser is being used.

A higher quality favicon is desirable especially with retina screens and now that many browers including IE9 are taking advantage of these.

Easy One Screen Operation

Upload the source image and click on «Iconify» and repeat as necessary. There’s no need to go back to the start to re-run iconifier.net.

Easy Download

You can download the icons individually or all together in one easy ZIP file. The ZIP file includes a folder so that icons aren’t strewn across your desktop or elsewhere when the file is expanded.

Use Apple Touch Icons for Self-hosted Blog or Website (Root Directory Accessible)

Use Apple touch icons with a self-hosted platform where you’ve access to the Root directory. There are two ways to add Apple touch icons

  1. Using one standard icon on all devices, i.e., the screen resolution doesn’t matter
  2. Using three different size icons for different screen resolutions

Another thing that counts here is these devices have their theme behavior that can be applied to your icon. If you want to prevent this change on your icon, you can use -precomposed suffix in the name of your icon file.

According to a standard format, your file should have name apple-touch-icon.png, and this should be uploaded to the root directory of the website. If you don’t want graphical theme behavior on your apple-touch-icon, then you should not forget to rename as apple-touch-icon-precomposed.png.

If you want to use Apple touch icons according to different screen resolutions (which is recommended), then you should have to add icon size as a suffix in the file name. These files should be in the Root directory on the server of your website. Hereunder is an example of how to name these icon files:

Standard iPhone: apple-touch-icon-57x57.png
iPhone 4 or 5: apple-touch-icon-114x114.png
Standard iPad: apple-touch-icon-72x72.png

С этим читают