Ръководства за favicon
Конкретни отговори на въпросите при създаване на favicon: какви размери, какви формати и какъв код да поставите.
Размери на favicon: формати и употреба
Търсенето на „размер на favicon“ все още връща списъци с петнадесет файла от 2014 г. На практика днес шест размера покриват разделите, резултатите от търсене, iOS, Android и PWA. Ето кои са те и защо.
Прочетете ръководствотоБезплатно конвертиране на PNG в ICO
.ico остава очакваният формат в основната директория на сайта, а повечето онлайн конвертори изискват да изпратите изображението към техен сървър. Ето как да получите правилен favicon.ico с няколко размера от PNG, без да качвате нищо.
Прочетете ръководствотоapple-touch-icon: размер, формат и код
Иконата Apple Touch изрично задава изображението, използвано когато посетител добави сайта ви към началния екран на своя iPhone. Тя е отделна от favicon в раздела и от иконите, декларирани в уеб манифеста.
Прочетете ръководствотоFavicon в тъмен режим със SVG
Черно лого на прозрачен фон изглежда чудесно в светъл раздел и е невидимо в тъмен. ICO не може да се адаптира, но SVG favicon може: съдържа CSS правило, което променя цветовете според темата на браузъра.
Прочетете ръководствотоДобавяне на favicon в HTML
Надеждният favicon в HTML зависи от малък комплект достъпни файлове и връзки в head. Тази процедура покрива съвременните раздели, по-старите клиенти и мобилните преки пътища, без да умножава историческите варианти.
Прочетете ръководствотоFavicon липсва или не се обновява
Когато favicon липсва, причината невинаги е във файла. Браузърът, CDN, service worker и търсачката могат да пазят различни версии. Подредената диагностика избягва промяна на няколко неща едновременно.
Прочетете ръководствотоFavicon с Next.js App Router
App Router може да създаде тагове за икони от файлове по конвенция или от обекта metadata. Двата подхода са валидни, но смесването им без ясни правила лесно води до конкуриращи се декларации.
Прочетете ръководствотоРъководство за SVG favicon
SVG запазва ясни контури при всяка плътност на екрана и може да адаптира цветовете си към темата. Тази гъвкавост има едно условие: файлът трябва да остане самостоятелен, прост и четлив в миниатюрно пространство.
Прочетете ръководството